我开始研究Bootstrap 3，我在理解如何使用网格类时遇到了一些麻烦。
这是我到目前为止所知道的：
类col-sm-#和col-lg-#似乎与普通旧版col-#不同，因为它们仅适用于屏幕超过一定大小（分别为768像素和992像素）的情况。如果省略-sm-或-lg-，div将永远不会折叠成一列。
但是，当我在一行中创建两个同时为col-sm-6的div时，当窗口在768px和992px之间时，它们似乎只是 。换句话说，如果我将窗口一直缩小然后慢慢加宽，则布局为单列，然后是两列，然后再返回单列 。
<div class="col-sm-6 col-lg-6">）col-6 ？ <div class="col-6 col-sm-6 col-lg-6"> 答案 0 :(得分：60)
[更新如下]
我又看了一下文档，看来我忽略了一个专门讨论这个问题的部分。
我的问题的答案：
是的，它们只适用于特定范围，而不是高于特定宽度的所有范围。
是的，这些课程要合并。
看来这在某些情况下是合适的，但在其他情况下则不合适，因为col-＃类基本上等于col-xsm-＃或宽度大于0px（所有宽度）。
除了太快阅读文档之外，我觉得我很困惑，因为我带着“Bootstrap 2心态”进入Bootstrap 3。具体来说，我在v2中使用（可选）响应式样式（bootstrap-responsive.css），而v3则完全不同（为了更好的IMO）。
UPDATE for stable release：
这个问题最初是在RC1出局时编写的。他们对RC2做了一些重大改动，所以对于现在读这篇文章的人来说，并不是上面提到的所有内容都适用。
当我正在写这篇文章的时候，col-*-#类看起来似乎适用了。例如，如果你想要一个元素为12列（全宽）的手机，但是两个6列（半页）用于平板电脑及以上，你可以这样做：
<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6
（在写完这个问题之后，他们还增加了一个xs断点。）
答案 1 :(得分：39)
Here你有一个非常好的教程，解释了如何在Bootstrap 3中使用新的网格类。
它还包括mixins等。
答案 2 :(得分：5)
要修改SDP上面的答案，您无需在col-xs-12中声明<div class="col-xs-12 col-sm-6">。 Bootstrap 3是移动优先的，因此默认情况下假定每个div列都是100％宽度div - 这意味着在“xs”大小它是100％宽度，无论你设置什么，它总是默认为该行为sm, md, lg。如果您希望xs列不是100％，那么您通常会执行col-xs-(1-11)。
答案 3 :(得分：4)
“如果我想要超过768px的两列，我应该同时应用这两个类吗？”
这应该简单如下：
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
无需添加col-lg-6。
答案 4 :(得分：4)
理解的最佳方式是简单地从上到下思考（大型桌面到移动电话）
首先，因为B3首先是移动的，所以如果你使用xs那么从大型桌面到xs的列将是相同的（我建议使用xs或sm，因为这样可以按照你想要的方式在每个屏幕尺寸上保留所有内容）
其次，如果你想为不同设备或分辨率的列提供不同的宽度，那么你可以添加多个类，例如
以上将根据屏幕分辨率更改宽度，请记住我保持每个类中的总列数= 12
我希望我的回答会有所帮助！
答案 5 :(得分：0)
这很晚了，因为我认为我们大多数人都在使用BS4。本文以详细，简单的方式解释了您提出的所有问题，还包括何时执行操作。使用bs4或bootstrap
https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7