在 Bootstrap 3 中了解网格类 (col-sm-＃和 col-lg-＃)

问题描述

我开始在 Bootstrap 3，我有一些麻烦，了解网格类是如何被使用的。

这是我迄今为止所想到的：

看来 col-sm-#和 col-lg-#类与普通的旧 col-#不同，因为它们只适用于屏幕高于一定大小 (分别为 768 像素和 992 像素) 时。如果省略-sm-或-lg-，div 将永远不会折叠成一列。

但是，当我在 col-sm-6 中创建两个 div 时，它似乎只有当窗口在 768 像素和 992 像素宽之间时并列。换句话说，如果我把窗口收缩一下，然后慢慢加宽，布局是单列，然后是两列，然后再次返回单列。

这是预期的行为吗？
如果我需要两列超过 768px 的任何列，我应该应用两个类吗？ (<div class="col-sm-6 col-lg-6">)
还应该包括 col-6 吗？ <div class="col-6 col-sm-6 col-lg-6">

最佳解决方案

[更新如下]

我再看了一下这个文件，看来我忽略了一个专门讲述的部分。

我的问题的答案：

是的，它们只适用于特定范围，而不是一定宽度以上的所有范围。
是的，这些课程是要组合起来的。
看起来这在某些情况下是合适的，而不是其他情况，因为 col＃类基本上等同于 col-xsm-＃或宽度大于 0px(所有宽度) 。

除了阅读文档太快以外，我觉得我很困惑，因为我以「Bootstrap 2 心态」进入了 Bootstrap 3 。具体来说，我在 v2 和 v3 中使用了 (可选的) 响应风格 (bootstrap-responsive.css)，而且相当不同 (对于更好的 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 断点。)

次佳解决方案

Here 你有一个非常好的教程，这说明了如何在 Bootstrap 3 中使用新的网格类。

它也包括 mixins 等

第三种解决方案

要修改 SDP 的上面的答案，您不需要在<div class="col-xs-12 col-sm-6"> 中声明 col-xs-12 。 Bootstrap 3 是 mobile-first，所以默认情况下，每个 div 列都是 100％宽度的 div – 这意味着在”xs” 大小是 100％宽度，它将始终默认为该行为，无论您在 sm, md, lg 中设置什么。如果您希望 xs 列不是 100％，那么你通常会做一个 col-xs-(1-11)。

第四种方案

“If I want two columns for anything over 768px, should I apply both classes?”

这应该是简单的：

<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

我希望我的答案有所帮助！

参考文献

Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

在 Bootstrap 3 中了解网格类 (col-sm-＃和 col-lg-＃)