奇怪的Bootstrap 3 网格行为

Strange Bootstrap 3 grid behavior

Html-代码示例:

<div class="row">
    <div class="col-md-12 col-sm-6" id="div1"></div>
    <div class="col-md-12 col-sm-6" id="div2"></div>
    <div class="col-md-12" id="div3"></div>
</div>

花了很多时间后我发现,如果您不指定特定@media 大小的所有规则,bootstrap 会以奇怪的方式运行。

在此示例中,在小型设备上,“div3”成为 div1div2 的容器,所有内容(例如:buttons)不再可访问。

不应该定义默认规则吗?喜欢col-sm-12,还是这样?

找出答案非常棘手。

编辑

Bootstrap 医生说:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

在这种情况下col-md-12以一种奇怪的方式应用于小型设备。

col-sm-6float: left。由于 col-md-12 没有浮动,它将出现在其他列的顶部。

<div class="row">
    <div class="col-md-12 col-sm-6" id="div1"></div>
    <div class="col-md-12 col-sm-6" id="div2"></div>
</div>
<div class="row">
    <div class="col-md-12" id="div3"></div>
</div>