85

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

这是我到目前为止所知道的：

似乎这些类col-sm-#和col-lg-#普通旧的不同之处col-#在于它们仅适用于屏幕大于一定尺寸（分别为 768 像素和 992 像素）时。如果您省略 -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">
4

6 回答 6

60

[下方更新]

我又看了一下文档，似乎我忽略了一个专门讨论这个的部分。

我的问题的答案：

  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 断点。）

于 2013-08-09T12:44:13.900 回答
39

这里有一个很好的教程，它解释了如何在 Bootstrap 3 中使用新的网格类。

它还涵盖了 mixins 等。

于 2013-09-19T01:09:14.563 回答
5

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

于 2013-08-09T13:53:14.420 回答
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).

于 2014-01-21T21:02:44.830 回答
5

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

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

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

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

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

于 2013-11-03T08:47:32.103 回答
0

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

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

于 2020-04-02T12:27:37.770 回答