Bootstrap 3和.col-xs- * - 你不需要12个单元的行吗？

I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.

我对Bootstrap 3文档有点困惑,因此使用了.col-xs- *类。

The docs for Grid Options say that all of the grid systems use 12 columns.

网格选项的文档说所有网格系统都使用12列。

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.

如果您查看Bootstrap 3的文档以获取示例移动和桌面布局,它们会显示第一行的.col-xs- *类,总共18个列单位。

What gives? How can this be? Are the docs wrong?

是什么赋予了?怎么会这样?文档错了吗?

Thank you

3 个解决方案

#1

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.

Bootstrap是一个12列的删除,但你可以连续放置12列以上。其余列将简单地换到下面的下一行,具体取决于视口。

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).

在此示例中,在“md”视口(≥992px)上,内容总共将跨越12列(8 + 4)。但是在“xs”(<768px)上,内容将跨越18列,将有一个完整行(12列),然后在其下方半行(6列)。

<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  |  

EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.

编辑:如果您遇到列未正确包装的任何问题,请务必查看文档的“响应列重置”部分。

#2

Think of the grid layout more in terms of a different grid for every size, lg, md, sm, and xs (or break points to be specific) that use the same markup. It might help to break open a few browser instances and an example of a grid layout. Follow along with this fiddle, or this markup:

对于使用相同标记的每个大小,lg,md,sm和xs(或特定断点)的不同网格,更多地考虑网格布局。打破一些浏览器实例和网格布局的示例可能会有所帮助。跟随这个小提琴,或这个标记:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>

You'll need to know your viewport's width in pixels, so consider a browser plugin that makes this information readily available or open up a console and run this snippet:

您需要知道视口的宽度(以像素为单位),因此请考虑使用此信息随时可用的浏览器插件或打开控制台并运行此代码段:

Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

Math.max(document.documentElement.clientWidth,window.innerWidth || 0)

---

Start with a viewport > 1200 pixels:

从视口> 1200像素开始:

The actual columns are decided by the col-lg-* classes because of the breakpoint. This will create a grid for that breakpoint.

由于断点,实际列由col-lg- *类决定。这将为该断点创建一个网格。

Now look at the other two break points, col-sm-* and col-xs-*.

现在看看另外两个断点,col-sm- *和col-xs- *。

col-sm-* in affect:

col-sm- *影响:

col-xs-* in affect:

col-xs- *影响:

The break points allow you to create a completely new grid per size. So, in theory, the rows act as a "strict" new row, where as the col numbers like

断点允许您为每个大小创建一个全新的网格。因此,理论上,行充当“严格”的新行,其中col作为

<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>

can force a new row if the sum > 12. This is so that you don't have to have umpteen different markup templates for different breakpoints. They are guides.

如果总和> 12,则可以强制换行。这样就不必为不同的断点设置不同的标记模板。他们是向导。

#3

The amount of rows a column occupies is the last number of the class.

列占用的行数是该类的最后一个数字。

So for example, these following classes:

例如,以下类:

.col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

will result in a single row on the md-width displays but one and a half row on xs-width displays.
This simply means that on small displays those elements won't display side-by-side, but instead on top of each other.

将在md宽度显示上生成一行,但在xs-width显示上生成一行半。这仅仅意味着在小型显示器上,这些元素不会并排显示,而是相互重叠。