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

是的，可以在row中添加更多12列。它只会使额外列包裹到下一行。所以，在你的例子中，你有2行4。

http://bootply.com/91392

来自Bootstrap文档（http://getbootstrap.com/css/#grid）..

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

此外，以下是一些示例，显示在一个col-*中使用超过12列（row）：http://getbootstrap.com/css/#grid-example-mixed

如果列的高度不同，请注意responsive resets。详细了解when to use Bootstrap row

相关问题：
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - Use more than 12 columns in a row
Where to place bootstrap row class
Boostrap row on multiple lines

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>

Bootstrap - 我可以将行加到12以上吗？

2 个答案: