Bootstrap 3 – 行可以列加起来多于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 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列被放置在一行中，每一组额外的列将作为一个单位换行到一个新的行”

另外，下面是一些在单行中使用多于12列（ col-* ）的示例： http : //getbootstrap.com/css/#grid-example-mixed

如果列的高度不一样，请注意响应的重置 。

详细了解何时使用Bootstrap行

Answer 2

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

这是我通过经验find的。 因此，我build议你不要超过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>