问题描述
我对Bootstrap 3文档感到困惑，因此使用 .col-xs - * 类。
I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.
的文档说，所有网格系统都使用12列。
The docs for Grid Options say that all of the grid systems use 12 columns.
如果您查看Bootstrap 3的文档，了解布局，它们显示第一行的 .col-xs - * 类共18列单位。
If you take a look at Bootstrap 3's docs for an Example Mobile and Desktop layout they show the first row's .col-xs-* classes totaling 18 column units.
给出？这怎么可能？文档是否错误？
What gives? How can this be? Are the docs wrong?
谢谢
推荐答案
Bootstrap 12列rid，但您可以在一行中放置超过12列。剩余的列将简单地换行到下一行，这取决于视口。
Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.
在此示例中，在md视口（≥992像素）上，内容将跨12列（8 + 4）。但是在xs（
In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
md ...
| 8 | 4 |
xs ...
| 12 |
| 6 |
编辑：请务必查看部分，如果您遇到任何问题，列不能正确包装。
Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.
这篇关于Bootstrap 3和.col-xs- * - 你不需要12单位的行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！