时间戳

首页 > 解决方案 > Bootsrap 3：来自 3 列行的响应断点

html - Bootsrap 3：来自 3 列行的响应断点

问题描述

我有两行，每行包含 3 列，我想在某个断点从 3 列切换到 2 列，从 2 列切换到 1 列（移动断点）。到目前为止，这就是我所拥有的。

@media (min-width:768px) {
    .col-md-4{
        min-width: 50%;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="row">
      <div class="col-md-4">1</div>
      <div class="col-md-4">2</div>
      <div class="col-md-4">3</div>
</div>

<div class="row" >
  <div class="col-md-4">4</div>
  <div class="col-md-4">5</div>
  <div class="col-md-4">6</div>
</div>

问题

这不起作用，我的代码中缺少什么？帮助我是新手

标签： htmlcsstwitter-bootstrap-3

解决方案

我会将它们全部放在同一个地方.row并使用适当的网格类。这应该可以得到你想要的：

<div class="row">
    <div class="col-sm-6 col-md-4">1</div>
    <div class="col-sm-6 col-md-4">2</div>
    <div class="col-sm-6 col-md-4">3</div>
    <div class="col-sm-6 col-md-4">4</div>
    <div class="col-sm-6 col-md-4">5</div>
    <div class="col-sm-6 col-md-4">6</div>
</div>

注意：我不会像那样重新定义.col-md-4或任何 Bootstrap 内置网格眼镜。

有关更多详细信息，请阅读有关使用网格眼镜的 Bootstrap 文档：https ://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

推荐阅读