了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)

Question

我正在开始使用Bootstrap 3,我在理解如何使用网格类时遇到了一些麻烦.

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

看起来这些类col-sm-#和col-lg-#普通的不同之处col-#在于它们仅适用于屏幕超过一定大小(分别为768px和992px)的情况.如果省略-sm-或-lg-,div将永远不会折叠成一列.

但是,当我在一行内创建两个div时,col-sm-6它们似乎只是在窗口介于768px和992px之间时并排.换句话说,如果我将窗口一直缩小然后慢慢加宽,则布局为单列,然后是两列,然后再次返回单列.

1. 这是预期的行为吗？
2. 如果我想要超过768px的两列,我应该同时应用这两个类吗？(<div class="col-sm-6 col-lg-6">)
3. 应该col-6 也包括在内？<div class="col-6 col-sm-6 col-lg-6">

Answer 1

[更新下面]

我又看了一下文档,看来我忽略了一个专门讨论这个问题的部分.

我的问题的答案:

1. 是的,它们仅适用于特定范围,而不是高于特定宽度的所有范围.

2. 是的,这些课程要结合起来.

3. 看起来这在某些情况下是合适的而不是其他情况,因为col-#类基本上等于col-xsm-#或宽度大于0px(所有宽度).

除了快速阅读文档之外,我认为我很困惑,因为我使用"Bootstrap 2心态"进入Bootstrap 3.具体来说,我在v2中使用(可选)响应式样式(bootstrap-responsive.css),而v3则完全不同(为了更好的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断点.)

Answer 2

这里有一个非常好的教程,解释了如何在Bootstrap 3中使用新的网格类.

它还包括mixins等.

Answer 3

“如果我想要两列超过 768 像素的东西，我应该同时应用这两个类吗？”

这应该很简单：

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

也无需添加col-lg-6。

演示：http : //www.bootply.com/73119

Answer 4

最好的理解方法是简单地从上到下思考（大型台式机到手机）

首先，由于 B3 首先是移动的，所以如果您使用 xs，那么从大型桌面到 xs 的列将相同（我建议使用 xs 或 sm，因为这将在每个屏幕尺寸上保持您想要的所有方式）

其次，如果您想为不同设备或分辨率上的列提供不同的宽度，那么您可以添加多个类，例如

以上将根据屏幕分辨率更改宽度，请记住，我将每个类中的总列数保持为 12

希望我的回答能帮到你！

Answer 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).