奇怪的 Bootstrap 3 网格行为答案

【问题标题】：Strange Bootstrap 3 grid behavior奇怪的 Bootstrap 3 网格行为
【发布时间】：2015-07-06 21:27:10
【问题描述】：

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 大小的所有规则，引导程序会以一种奇怪的方式运行。

在这个小型设备上的示例中，“div3”变成了div1、div2 的容器，并且所有内容（例如：buttons）都无法访问。

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

很难找到。

编辑

引导文档说：

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

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

【问题讨论】：

你应该阅读这篇文章stackoverflow.com/questions/24175998/…

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

这不是真的。我可以有多个包装，在某些情况下也应该。
好吧，在某些情况下确实如此。编辑了我的答案。 col-sm-* 有 float:left，是什么导致了这些问题。
不应该由引导程序定义 col-sm-12 如果未定义的默认值？
col-md-6 是屏幕尺寸 md 及以上尺寸的一半。 xs 和 sm 将自动为 100%。因此，如果您使用col-sm-12，则没有必要。当您不想要全宽列时，就会出现这种情况。如果将尺寸等级设置为一列，则应为每一列设置相同的尺寸等级。阅读this question。
我了解它是如何工作的，优先级是从 xs 到 lg，我面临的问题是没有默认的 col-*-12。我想我应该习惯将 col-xs-12 而不是 col-md-12 定义为默认值。