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。