了解网格类（col
我开始使用Bootstrap 3，并且在理解如何使用网格类时遇到了一些麻烦。
这是我迄今为止所了解到的：
看来，类col-sm-#和col-lg-#从普通老式不同col-#在于：当屏幕（分别768px和992px）是一定的尺寸以上，他们将才适用。 如果你省略-sm-或-lg-，那么div永远不会合并成一列。
但是，当我在一行都是col-sm-6情况下创建两个div时，当窗口宽度在768像素和992像素之间时，它们似乎只能并排排列。 换句话说，如果我一直向下缩小窗口，然后逐渐扩大窗口，则布局是单列，然后是两列，然后再回到单列。
<div class="col-sm-6 col-lg-6"> ） col-6也应该包括在内吗？ <div class="col-6 col-sm-6 col-lg-6"> [下面的更新]
我再看看文档，看起来我忽略了一个专门讨论这个问题的部分。
我的问题的答案：
是的，它们只适用于特定范围，而不适用于特定宽度以上的所有范围。
是的，这些课程是为了合并。
看起来这在某些情况下适用，但在其他情况下适用，因为col-＃类基本上等同于col-xsm-＃或高于0px（全部宽度）的宽度。
除了阅读文档太快之外，我觉得我很困惑，因为我带着“Bootstrap 2心态”进入Bootstrap 3。 具体来说，我在v2和v3中使用（可选）响应式样式（bootstrap-responsive.css）是非常不同的（对于更好的IMO）。
更新稳定版本：
这个问题最初是在RC1出来时编写的。 他们对RC2进行了一些重大更改，因此对于现在阅读此内容的任何人，并非上述所有内容都适用。
至于当前我正在写这篇文章的时候， col-*-#类似乎是向上申请的。 因此，例如，如果您希望手机的元素为12列（全宽），而平板电脑的元素为两列（半页），则可以这样做：
<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6
（在写这个问题之后，他们还添加了一个额外的xs断点。）
这里有一个非常好的教程，解释了如何在Bootstrap 3中使用新的网格类。
它还涵盖mixin等。
要修改上述SDP的答案，您不需要在<div class="col-xs-12 col-sm-6">声明col-xs-12 。 Bootstrap 3是移动优先的，因此默认每个div列都是100％宽度的div - 这意味着在“xs”大小的情况下它的宽度为100％，无论您设置的是什么，它总是默认为该行为sm, md, lg 。 如果你想让你的xs列不是100％，那么你通常会做一个col-xs-(1-11) 。
上一篇: Understanding the grid classes ( col
下一篇: Bootstrap