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> 

是的,可以有更多的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行

如果你想这样做,那么你必须在里面设置列的高度,因为如果你的列有不同的高度,那么超过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>