bootstrap栅格排版防止堆叠
html代码如下:
<div class="row">
<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3 ddddd ddddd
ddddd ddddd ddddd ddddd ddddd dddd dddddd dddddddd
dddddd dddddddd ddddd ddddd</div>
<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3</div>
<div class="clearfix visible-sm visible-md"></div>
<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3 </div>
</div>
这里特地把第一个div的内容加多,否则看不出效果。因为bootstrap的布局方式实际上是float: left; 如果没有clearfix这一步,第三个div实际上出现在第二个下面。如下图所示:
而有clearfix那一步,出现的效果则如下图所示:
还有这里的class=“visible-md”必须要有,否则屏幕宽度大于992px时clearfix所在的div会隐藏,从而再次导致堆叠。
因为没写col-md-*,实际上col-sm-*起作用的范围是包括col-md-*的(只要大于768px),而visible-sm作用范围却不包括visible-md,在屏幕宽度大于992px时,所在div会被隐藏。