了解 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. 如果我想要两列用于超过 768 像素的任何内容，我应该应用 both 类吗？ (<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 列（全宽），而平板电脑及以上的元素为 2 列 6 列（半页），您可以执行以下操作：

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

（在写完这个问题后，他们还添加了一个额外的 xs 断点。）

Answer 2

Here 你有一个很好的教程，解释了如何在 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，因为这样可以在每个屏幕尺寸上保持您想要的所有内容）

其次，如果您想在不同的设备或分辨率上为列赋予不同的宽度，则可以添加多个类，例如

上面会根据屏幕分辨率改变宽度，记住我保持每个 class= 12 的总列数

希望我的回答对你有帮助！

Answer 5

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

Answer 6

这可能会迟到，因为我认为我们大多数人都在使用 BS4。本文详细而简单地解释了您提出的所有问题，还包括何时做什么。使用bs4或bootstrap的详细指南

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