Question

我有两行，每行包含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>

问题

这不起作用，我的代码中缺少什么？

Answer 1

我会将它们全部放在同一.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

Answer 2

只需使用引导程序的不同断点列类。如果要更改引导程序3中的顺序（按照注释的要求），则可以轻松使用推拉功能。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
      <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
      <div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
      <div class="col-md-4 col-sm-6">3</div>
    </div>

https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

Answer 3

使用col-sm-6以sm的大小在一行中设置2个div ...

（计算公式为：12/6=2 => 100% /2=50%意味着每个div都将50%归入其width）

默认情况下，xs大小的屏幕会在1行中设置1 div，因为您没有另外指定...

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<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>

<div class="row" >
  <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>
</div>

Bootsrap 3：3列行中的响应断点

3 个答案: