引导从3列到2同时保留行

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并允许引导做是很自然的包装，像这样：

<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"> 
    } 
} 

那么这将完成是每第2次迭代打印clearfix为xs/sm，每第3次迭代打印clearfix为md/lg和每隔6次迭代打印clearix两者。