twitter-bootstrap - Bootstrap - 行我可以让列加起来超过 12 个吗？

Question

我想知道我的嵌套行是否可以加起来超过 12？以这种方式工作有错吗？

我试过了，它似乎对我来说很好，但我想确保我做对了。

例如，我可以有这个吗？

<div class="col-md-10">
 <div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>
</div>

Answer 1

是的，可以在 a 中包含超过 12 列row它只会使额外的列换行到下一行。因此，在您的示例中，您将有 2 行，每行 4 行。

http://bootply.com/91392

从引导文档（http://getbootstrap.com/css/#grid）..

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

col-*此外，这里有一些示例显示在单个中使用超过 12 列 ( )：http row: //getbootstrap.com/css/#grid-example-mixed

如果列的高度不同，请注意响应重置。阅读有关何时使用 Bootstrap 行的更多信息

---

相关问题：
Bootstrap 如果我连续放置超过 12 列会发生什么？
Bootstrap 3 - 连续使用超过 12 列 在
何处放置引导行类
Boostrap 行在多行上

Answer 2

如果你想这样做，那么你必须设置里面的列的高度，因为如果你的列的高度不同，那么超过 12 列网格的列将破坏布局。

这是我通过经验发现的。因此，我建议您的行中的“列”不要超过 12 个。所以在你的情况下，我认为应该是这样的：

<div class="col-md-10">
 <div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
  <div class="row">
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>
</div>