了解Bootstrap 3中的网格类（col-sm-＃和col-lg-＃）

我刚开始使用Bootstrap 3，但在理解如何使用网格类时遇到了一些麻烦。

到目前为止，这是我所发现的：

看起来这些类col-sm-#与col-lg-#以前的类不同col-#，它们仅在屏幕大于特定大小（分别为768px和992px）时才适用。如果省略-sm-或-lg-，则div永远不会折叠到一列中。

然而，当我创建一个行内的两个div，它们都col-sm-6似乎他们只并排窗口时768px和992px宽之间。换句话说，如果我缩小窗口，一路下来，然后慢慢扩大它的布局是单列，然后两个列，然后回单柱再次。

1. 这是预期的行为吗？
2. 如果我希望两列超过768像素，我应该同时应用这两个类吗？（<div class="col-sm-6 col-lg-6">）
3. 应该col-6 也包括在内？<div class="col-6 col-sm-6 col-lg-6">

[更新如下]

我再次看了看文档，似乎忽略了专门讨论此问题的部分。

我的问题的答案：

1. 是的，它们仅适用于特定范围，而不适用于超过一定宽度的所有范围。

2. 是的，这些类是可以合并的。

3. 似乎这在某些情况下是适当的，但在其他情况下则不是，因为col-＃类基本上等于col-xsm-＃或大于0px的宽度（所有宽度）。

除了阅读文档太快以外，我还觉得很困惑，因为我以“ Bootstrap 2心态”进入Bootstrap 3。具体来说，我在v2和v3中使用（可选）响应样式（bootstrap-sensitive.css）是完全不同的（为了更好的IMO）。

UPDATE，用于稳定版本：

该问题最初是在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等。

“如果我想要两列用于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

希望我的回答会有所帮助！

要修改上述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)。

因为我认为我们大多数人都在使用BS4，所以这可能太迟了。本文以详细，简单的方式解释了您提出的所有问题，还包括何时执行操作。使用bs4或的详细指南bootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7