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 div中，我有3个大的列，每个列中都有一个图像，在这个＆＃34;范围＆＃34;我的列被重置为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。