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

Posted 2023-03-06

【中文标题】了解 Bootstrap 3 中的网格类（ col-sm-# 和 col-lg-# ）

【英文标题】：Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

【发布时间】：2013-08-11 09:22:40

【问题描述】：

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

到目前为止，这是我想出的：

似乎col-sm-# 和col-lg-# 类与普通的旧col-# 不同，它们仅适用于屏幕大于特定尺寸（分别为768px 和992px）时。如果省略 -sm- 或 -lg-，则 div 将永远不会折叠成一列。

但是，当我在一行中创建两个 div 时，它们都是 col-sm-6，当窗口宽度在 768px 和 992px 之间时，它们似乎仅并排。换句话说，如果我把窗口一直缩小然后慢慢加宽，布局是单列，然后是两列，然后回到单列再次。

这是预期的行为吗？ 如果我想要两列用于超过 768 像素的任何内容，我应该应用 both 类吗？ (<div class="col-sm-6 col-lg-6">) 是否应该包括col-6 也？ <div class="col-6 col-sm-6 col-lg-6">

【问题讨论】：

阅读表格：getbootstrap.com/css/#grid #1 - 这是预期的行为，因为使用 @media 表示特定尺寸。 #2 和 #3 是的，请阅读“示例：将移动设备与桌面设备相结合”和“示例：移动设备、平板电脑和桌面设备”

@RaphaelDDL 谢谢。我在发帖后不久就想通了。我想我希望 v3 的行为类似于 v2 的“bootstrap-responsive.css”，但事实并非如此。

另见：***.com/questions/17919225/…

【参考方案1】：

[以下更新]

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

我的问题的答案：

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

是的，这些类是要合并的。

似乎这在某些情况下是合适的，但在其他情况下则不合适，因为 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 断点。）

【讨论】：

超链接似乎指向当前不存在的页面。我不确定是否应该将其更新为指向上面提供的@RaphaelDDL 的链接——getbootstrap.com/css/#grid——还是指向其他链接？

感谢您的提问和回答。我不是 css 人，起初网格设置也让我感到困惑。但如果你说的是真的，最好只使用 xs 并让一切向上应用。

【参考方案2】：

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

它还涵盖了 mixins 等。

【讨论】：

博客链接详细描述了 Bootstrap 3 的网格，包括 4 个大小调整类，例如 col-xs-*。有很好的代码示例。

很好，尤其是他不断鼓励你坚持的作风； “有用吗？不？不知道？让我们继续吧！” 还用恰当的句子解释事情：“这基本上是说“让我一直保持 6 列宽到手机尺寸，永远不要把我切换到堆叠的移动布局。””。感谢发帖

【参考方案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

【讨论】：

由于我还无法解释的原因，它对我来说不起作用。 .col-sm-6 似乎只适用于特定的宽度范围（并非以上所有内容）

【参考方案4】：

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

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

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

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

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

【参考方案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)。

【参考方案6】：

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

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

【讨论】：

考虑将链接中的相关信息放在为答案提供的空间中。

我包含该链接的唯一原因是它对我从顶部开始阅读文章很有帮助。这时候才有意义。