Question

Html-Code示例：

<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＆＃34;成为div1，div2的容器，所有内容（例如：buttons）都无法访问。

不应该定义默认规则吗？像col-sm-12一样，还是这样？

找出答案非常棘手。

修改的

Bootstrap doc说：

网格类适用于屏幕宽度大于或等于的设备到断点大小，并覆盖针对较小的网格类设备。因此，例如将任何.col-md- *类应用于元素不仅会影响它在中型设备上的造型，还会影响它的大型造型设备如果没有.col-lg- *类。

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

Answer 1

col-sm-6有float: 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>

奇怪的Bootstrap 3网格行为

1 个答案: