Question

这是有效的引导程序吗？

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

或者我每12列需要一个新行吗？

因为现在这样做对我来说不起作用。而且我不希望每隔12天就有一行，因为我需要过滤我的文章，当他们在不同的行时我不能这样做。

Answer 1

Bootstrap has a own Grid-System，可让您最多12列。来自文件：

Bootstrap包括一个响应式移动第一流体网格系统适当缩放最多12列作为设备或视口大小增加。

它有一个原因，它只有12，而不是你想拥有的那么多。本文非常好地描述了它：The Subtle Magic Behind Why the Bootstrap 3 Grid Works

阅读完本文后，您完全可以按照预期的方式使用Bootstraps网格系统。

Answer 2

每12列您将获得一个新的视觉行，但您不需要使用标记来定义它。

来自the documentation：

如果在一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行。

Answer 3

查看grid system上的官方bootstrap文档。它很直接。

基本上每行最多只能加12个。所以你能够在一行中放入两个col-sm-6 div（显示为两个并排的列）

Answer 4

＆＃34;我是否每12列需要一个新行？＆＃34; ..

与流行的观点相反，可以在一个.row中包含总计超过12个单位的列。它只是导致行换行。这称为column wrapping ..

＆＃34;如果在一行中放置了超过12列，则每组都有额外的列将作为一个单元包裹到一个新的行＆＃34;

所以这......

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

功能上与相同 ......

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>
<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

动态创建col-*时，每行超过12列是常见的情况。如果您在不同高度的列中出现间隙问题，则可以像每个n-TH列一样使用CSS clearfix .. http://www.codeply.com/go/J6cCo3xL7H

Bootstrap行和列说明

4 个答案: