使用Bootstrap网格系统，如果您混合并匹配尺寸，那么可以掩盖某些列？

Question

我混合和匹配不同尺寸sm，md，lg，看看它有什么作用：

https://jsfiddle.net/sdLcdrom/

<div class="container"> 

    <div class="row"> 

     <div class="col-sm-4" style="background: #fa6">hello 1</div> 
     <div class="col-md-4" style="background: #6af">hello 2</div> 
     <div class="col-lg-4" style="background: #6fa">hello 3</div> 

    </div> 

</div> 

而且它应该有什么样的行为？

事实证明，在大小xs，所有3个div都堆叠起来，一个在另一个之上很好。在尺寸为sm，即768px及以上的宽度上，第一个div被遮盖（变为不可见），而在md（其宽度为992px）时，第二个div也被遮盖。只有当它是lg，在1200px的宽度和以上，那么所有3格再次可见。

我可以理解xs和lg的情况，但sm和md如何解决？我没想到他们互相掩护，但期待他们“流向下一线”。

例如，在sm，宽度768px及以上，我预计第一个div的宽度为4列，而div 2和div 3的宽度均为12列，并且“wrapps”其他，到下一行。第一个div不应该被掩盖。

它没有发生。那是什么原因？

Answer 1

你可以使用clearfix山坳类

<div class="clearfix"></div> 

实例之间： https://jsfiddle.net/sdLcdrom/1/

这是你正在寻找的答案？真的很难理解最终结果应该是什么，也许你应该创建一些图像来显示网格应该如何响应不同的屏幕尺寸。

您也可以分配多个类给一个DIV这样

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

这样在div是中型和大屏幕的宽度的1/3，在小屏幕上的宽度的1/2和超小屏幕上的1/1宽度。