Html 了解 Bootstrap 3 中的网格类（ col-sm-# 和 col-lg-# ）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18146775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3
提问by emersonthis
I'm getting started on Bootstrap 3 and I'm having some trouble understanding how the grid classes are meant to be used.
我开始使用 Bootstrap 3，但在理解如何使用网格类时遇到了一些麻烦。
Here's what I've figured out so far:
这是我到目前为止想出来的：
It appears that the classes col-sm-#and col-lg-#differ from plain old col-#in that they will only apply when screens are above a certain size (768px and 992px respectively). If you omit the -sm- or -lg- the divs will never collapse into one column.
似乎这些类col-sm-#与col-lg-#普通的旧类不同col-#，因为它们仅在屏幕大于特定尺寸（分别为 768 像素和 992 像素）时才适用。如果省略 -sm- 或 -lg-，div 将永远不会折叠为一列。
However, when I create two divs inside a row that are both col-sm-6it seems they are onlyside by side when the window is between 768px and 992px wide. In other words, if I shrink the window all the way down and then slowly widen it, the layout is single column, then two columns, then back to single column again.
但是，当我在一行中创建两个 div时，当窗口宽度在 768px 和 992px 之间时，col-sm-6它们似乎只是并排。换句话说，如果我缩小窗口，一路下来，然后慢慢扩大它的布局是单列，然后两个列，然后回单柱再次。
- Is this the intended behavior?
- If I want two columns for anything over 768px, should I apply bothclasses? (
<div class="col-sm-6 col-lg-6">) - Should
col-6alsobe included?<div class="col-6 col-sm-6 col-lg-6">
- 这是预期的行为吗？
- 如果我想要两列超过 768px 的东西，我应该同时应用这两个类吗？(
<div class="col-sm-6 col-lg-6">) - 应该
col-6也包括在内？<div class="col-6 col-sm-6 col-lg-6">
采纳答案by emersonthis
[UPDATE BELOW]
[更新如下]
I took another look at the docs and it appears I overlooked a section which talks specifically about this.
我又看了看文档，似乎我忽略了专门讨论这个的部分。
The answers to my questions:
我的问题的答案：
Yes, they are meant to apply only to specific ranges, rather than everything above a certain width.
Yes, the classes are meant to be combined.
It appears that this is appropriate in certain cases but not others because the col-# classes are basically equivalent to col-xsm-# or, widths above 0px (all widths).
是的，它们仅适用于特定范围，而不是特定宽度以上的所有内容。
是的，这些课程是要结合在一起的。
看起来这在某些情况下是合适的，但在其他情况下不合适，因为 col-# 类基本上等同于 col-xsm-# 或 0px 以上的宽度（所有宽度）。
Other than reading the docs too quickly, I think I was confused because I came into Bootstrap 3 with a "Bootstrap 2 mentality". Specifically, I was using the (optional) responsive styles (bootstrap-responsive.css) in v2 and v3 is quite different (for the better IMO).
除了太快地阅读文档之外，我觉得我很困惑，因为我带着“Bootstrap 2 心态”进入 Bootstrap 3。具体来说，我在 v2 和 v3 中使用（可选）响应式样式（bootstrap-responsive.css）是完全不同的（为了更好的 IMO）。
UPDATE for stable release:
更新稳定版本：
This question was originally written when RC1 was out. They made some major changes in RC2 so for anyone reading this now, not everything mentioned above still applies.
这个问题最初是在RC1出来的时候写的。他们对 RC2 进行了一些重大更改，因此对于现在阅读本文的任何人来说，并非上述所有内容仍然适用。
As of when I'm currently writing this, the col-*-#classes DO seem to apply upwards. So for example, if you want an element to be 12 columns (full width) for phones, but two 6 columns (half page) for tablets and up, you would do something like this:
在我目前写这篇文章的时候，这些col-*-#类似乎向上应用。因此，例如，如果您希望手机的元素为 12 列（全宽），但平板电脑及以上的元素为两列 6 列（半页），您可以执行以下操作：
<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6
(They also added an additional xs break point after this question was written.)
（在写完这个问题后，他们还添加了一个额外的 xs 断点。）
回答by Srikanth
回答by Aslam
The best way to understand is to simply think from top to bottom ( Large Desktops to Mobile Phones)
最好的理解方法是简单地从上到下思考（大型台式机到手机）
Firstly, as B3 is mobile first so if you use xs then the columns will be same from Large desktops to xs ( i recommend using xs or sm as this will keep everything the way you want on every screen size )
首先，因为 B3 首先是移动的，所以如果你使用 xs，那么从大型桌面到 xs，列将是相同的（我建议使用 xs 或 sm，因为这将在每个屏幕尺寸上保持你想要的一切）
Secondly if you want to give different width to columns on different devices or resolutions, than you can add multiple classes e.g
其次，如果您想为不同设备或分辨率上的列提供不同的宽度，那么您可以添加多个类，例如
the above will change the width according to the screen resolutions, REMEMBER i am keeping the total columns in each class = 12
以上将根据屏幕分辨率更改宽度，请记住，我将每个类中的总列数保持为 12
I hope my answer would help!
希望我的回答能帮到你！
回答by helloerik
To amend SDP's answer above, you do NOT need to declarecol-xs-12in <div class="col-xs-12 col-sm-6">. Bootstrap 3 is mobile-first, so every div column is assumed to be a 100% width div by default - which means at the "xs" size it is 100% width, it will always default to that behavior regardless of what you set at sm, md, lg. If you want your xscolumns to be not 100%, then you normally do a col-xs-(1-11).
要修改上述 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).
回答by Zim
"If I want two columns for anything over 768px, should I apply both classes?"
“如果我想要两列超过 768 像素的东西，我应该同时应用这两个类吗？”
This should be as simple as:
这应该很简单：
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
No need to add the col-lg-6too.
也无需添加col-lg-6。
回答by AAA
This might be late as I think most of us are using BS4. This article explained all the questions you asked in a detailed and simple manner also includes what to do when. The detailed guide to use bs4 or bootstrap
这可能晚了，因为我认为我们大多数人都在使用 BS4。这篇文章详细而简单地解释了您提出的所有问题，还包括何时该做什么。使用 bs4 或的详细指南bootstrap
https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7
https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7
