twitter-bootstrap col-*-12 (col-xs / col-sm / etc) 在 Bootstrap 3 中的使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26165996/
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
col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3
提问by Christina
I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).
我在 StackOverflow 的代码示例和出售的主题中看到了类似下面的内容（从来没有在 Bootstrap 的示例中）。
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Words go here</p>
</div>
</div>
</div>
OR
或者
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>Words go here</p>
</div>
</div>
</div>
It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.
这让我很抓狂，因为根据 Bootstrap 自己的文档和常识，这两者对于全宽单列都是不正确的。
When do you actually use the grid system? When does col-*-12come into play?
你什么时候真正使用网格系统？什么col-*-12时候开始玩？
采纳答案by Christina
If something is full width, you don't need it at all.
如果某物是全宽的，则您根本不需要它。
Learn: http://getbootstrap.com/examples/grid/
学习：http: //getbootstrap.com/examples/grid/
The correct html for both of the above examples is this:
上述两个示例的正确 html 是这样的：
<div class="container">
<p>Words go here</p>
</div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->
If you want your columns to be full width, it will be under the last column class you used. The following will be full width below where the col-sm- min-width starts (so 767px and UNDER in a default download of Bootstrap 3.x).
如果您希望您的列全宽，它将位于您使用的最后一个列类之下。以下将是 col-sm-min-width 开始处的全宽（因此在 Bootstrap 3.x 的默认下载中为 767px 和 UNDER）。
<div class="row">
<div class="col-sm-4">
Stuff
</div><!-- /.col-sm-4 -->
<div class="col-sm-8">
Stuff
</div><!-- /.col-sm-8 -->
</div><!-- /.row -->
Don't forget the outer .container or .container-fluid (one per grouping of content that does not change width). The .container or .container-fluid zeros out the negative margin on the .row so you won't get horizontal scroll bars.
不要忘记外部 .container 或 .container-fluid （每组不改变宽度的内容一个）。.container 或 .container-fluid 将 .row 上的负边距归零，这样你就不会得到水平滚动条。
The situations when you use col-*-12 is where you want a full width AFTER the min-width of the smaller column class:
当您使用 col-*-12 时，您需要在较小列类的最小宽度之后的全宽：
<div class="row">
<div class="col-sm-6 col-md-12">
Stuff
</div><!-- /.col-sm-6 col-md-12 -->
<div class="clearfix visible-md"></div>
<div class="col-sm-6 col-md-4">
Stuff
</div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->
Anyway, col-*-12 comes in handy in nesting situations, especially with forms.
无论如何， col-*-12 在嵌套情况下派上用场，尤其是在表单中。
回答by Shawn Taylor
Your frustration is right.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">is totally redundant.
你的沮丧是对的......<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">完全是多余的。
Because Bootstrap 3+ is mobile first, any col-classes you declare travel up, meaning they apply to the declared device (xs, sm, md, lg) and larger. So, col-xs-12 col-sm-12is redundant. Just use col-xs-12for the same effect.
因为 Bootstrap 3+ 是移动优先的，所以你声明的任何 col-class 都会向上移动，这意味着它们适用于声明的设备（xs、sm、md、lg）和更大的设备。所以，col-xs-12 col-sm-12是多余的。仅col-xs-12用于相同的效果。
Also, if you don't declare an xs class, the layout will default to col-*-12 once below the smalles col-class you do declare. e.g. <div class="col-sm-6">is half-width on smand up, but full-width on xs. Whereas <div class="col-md-6">is half width on mdand up, but full width on smand xs.
此外，如果您不声明 xs 类，则布局将默认为 col-*-12 低于您声明的 smalles col-class。eg<div class="col-sm-6">是半角sm向上，但全角在xs. 而<div class="col-md-6">半宽在md上，而全宽在sm和上xs。
This being said, you should always declare at least one col-class, so it gets the relevant padding and other styling specifics.
话虽如此，您应该始终声明至少一个 col-class，以便它获得相关的填充和其他样式细节。
