Question

我有一个3列和2行的桌面布局，如下所示：

<div class="row">
  <div class="col-md-4">
    1. Lorem ipsum
  </div>
  <div class="col-md-4">
    2. dolor sit<br>amet
  </div>
  <div class="col-md-4">
    3. consectetur
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    4. adipisicing<br>incididunt
  </div>
  <div class="col-md-4">
    5. elit
  </div>
  <div class="col-md-4">
    6. sed reprehenderit
  </div>
</div>

在移动设备上，我希望实现2列和3行的布局，如下所示：

<div class="row">
  <div class="col-xs-6">
    1. Lorem ipsum
  </div>
  <div class="col-xs-6">
    2. dolor sit<br>amet
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3. consectetur
  </div>
  <div class="col-xs-6">
    4. adipisicing<br>incididunt
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    5. elit
  </div>
  <div class="col-xs-6">
    6. sed reprehenderit
  </div>
</div>

所以我目前的解决方案是只有一个包裹row并允许Bootstrap像这样进行自然包装：

<div class="row">
  <div class="col-xs-6 col-md-4">
    1. Lorem ipsum
  </div>
  <div class="col-xs-6 col-md-4">
    2. dolor sit<br>amet
  </div>
  <div class="col-xs-6 col-md-4">
    3. consectetur
  </div>
  <div class="col-xs-6 col-md-4">
    4. adipisicing<br>incididunt
  </div>
  <div class="col-xs-6 col-md-4">
    5. elit
  </div>
  <div class="col-xs-6 col-md-4">
    6. sed reprehenderit
  </div>
</div>

工作正常，除非列的高度不同（它们不是）。在这种情况下，布局会破坏浮动被元素捕获的位置。

这是问题的一个Plunker示例：https://embed.plnkr.co/eUJCUiGl5VrnTc5Z1c72/

这种情况下的解决方案是什么？

Answer 1

您已经关闭了，并且您使用单个包装<div class="row">元素获得了正确的想法。您所需要的只是clearfix元素，在某些断点值(xs, sm, md, lg)处可见：

<div class="row">
    <div class="col-md-4 col-xs-6">
        <div class="body">
            1. Multi<br>line<br>content
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            2. Single line
        </div>
    </div>
    <div class="clearfix visible-xs-block visible-sm-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            3. Double<br>line
        </div>
    </div>
    <div class="clearfix visible-md-block visible-lg-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            4. More content
        </div>
    </div>
    <div class="clearfix visible-xs-block visible-sm-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            5. Body
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            6. Text<br>with<br>many<br>many<br>lines
        </div>
    </div>
    <div class="clearfix"></div>
</div>

这样做会以给定的时间间隔强制新行 - xs/sm每隔一个<div>和md/lg每三分之一<div>（可以使用循环以编程方式轻松插入）。通过指定visible-*-block类，它只会在某些断点处呈现<div>，这意味着您不会获得意外空格。

您可以找到更多文档Here和实例Here

生成此循环的示例（PHP，但可以使用任何语言完成）：

for($i = 1; $i < 13; $i++){
  echo '<div>'.$i.' Words... Blah... Whatever.</div>';
  if($i % 6 == 0){
    echo '<div class="clearfix"></div>';
  } else if($i % 3 == 0){
    echo '<div class="clearfix visible-md-block visible-lg-block"></div>';
  } else if($i % 2 == 0){
    echo '<div class="clearfix visible-xs-block visible-sm-block">
  }
}

所以这将是每次第二次迭代为clearfix打印xs/sm，每3次迭代为clearfix打印md/lg，每第6次迭代打印一次{{} 1}}对于两者。

Bootstrap从3列变为2，同时保留行

1 个答案: