Bootstrap嵌套網格

Question

我正在使用16列Bootstrap。

我想要實現的設計是：

而且我的代碼是：

<div class="row"> 

<div class="col-xs-12 col-xs-offset-1"> 

    <!-- Images goes here --> 

</div> 

<div class="col-xs-3"> 

    <!-- Paginator Links --> 

</div> 

</div> 

的主要問題是，在我的COL-XS-12格，我有3個大柱子裏面有一個圖像，在這個「範圍」中，我的列被重新設置爲16，所以我不能將它除以3.

我正在做正確的方法嗎？

Answer 1

如果您使用的是16列Boostrap，只要不嵌套其他.row元素，仍然可以使用頂級網格。取而代之的

<div class="col-xs-12 col-xs-offset-1"> 
    <!-- images here --> 
</div> 

嘗試使用：

<div class="col-xs-4 col-xs-offset-1"> 
    <!-- image here --> 
</div> 
<div class="col-xs-4"> 
    <!-- image here --> 
</div> 
<div class="col-xs-4"> 
    <!-- image here --> 
</div> 

如果您遇到問題與列不浮正常，你可以使用一個.clearfix method。