了解Bootstrap 3中的网格类（col-sm-＃和col-lg-＃）
我开始使用Bootstrap 3，并且在理解如何使用网格类时遇到了一些麻烦。
以下是我迄今为止所了解到的：
看来类col-sm-#和col-lg-#与普通的旧col-lg-#不同，它们只会在屏幕大于特定大小（分别为768像素和992像素）时应用。 如果你忽略了-sm-或-lg-，那么div永远不会合并成一列。
但是，当我在一行都是col-sm-6时候创build两个div的时候，当窗口宽度在768px和992px之间时，它们似乎只是并排的。 换句话说，如果我把窗口一直缩小，然后慢慢加宽，布局是单列，然后是两列，然后再回到单列。
- 这是预期的行为？
- 如果我需要两列超过768px，我是否应该同时使用这两个类？ （
<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列（全宽）的手机，但两个6列（半页）的平板电脑和起来，你会做这样的事情：
<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) 。
“如果我需要两列超过768px的东西，我是否应该同时使用这两个类？”
这应该像下面这样简单：
<div class="row"> <div class="col-sm-6"></div> <div class="col-sm-6"></div> </div>
不需要添加col-lg-6 。
演示： http ： //www.bootply.com/73119
理解最好的方法是简单地从上到下（大型台式机到手机）
首先，由于B3首先是移动的，所以如果你使用xs，那么从大的桌面到xs的列将是相同的（我推荐使用xs或sm，因为这将在每个屏幕尺寸上保持你想要的一切）
其次，如果你想给不同的设备或分辨率列不同的宽度，比你可以添加多个类，例如
以上将根据屏幕分辨率改变宽度，请记住，我保持在每个类= 12总列
我希望我的回答会有所帮助！
