Twitter bootstrap 奇怪的bootstrap3网格行为

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 size的所有规则，引导程序的行为会很奇怪

在此示例中，在小型设备上“

div3

”成为

div1

，

div2

的容器，并且所有内容（例如：

按钮

）都不易访问

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

这是一个非常棘手的问题

编辑

Bootstrap doc说：

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

---

在这种情况下，

col-md-12

以一种奇怪的方式应用于小型设备。

col-sm-6

具有

float:left

。由于

col-md-12

dosen没有浮点，它将出现在其他列的顶部

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

这不是真的。我可以有多个COL包裹，在某些情况下也应该。好的，在某些情况下确实应该。编辑了我的答案

col sm-*

具有

float:left

，是什么导致了这些问题。如果未定义col-sm-12，则不应通过引导定义默认值？

col-md-6

是屏幕大小的一半

md

及以上

xs

和

sm

将自动100%。因此，如果您使用

col-sm-12

，则没有必要。当您不需要全宽列时，会出现此选项。如果将大小类设置为一列，则应将相同的大小类设置为每列。阅读。我理解它是如何工作的，优先级从xs到lg，我面临的问题是没有默认的col-*-12。我想我应该习惯于将col-xs-12而不是col-md-12定义为默认值