引导嵌套网格答案

【问题标题】：Bootstrap Nested Grids引导嵌套网格
【发布时间】：2015-04-05 23:02:13
【问题描述】：

我正在使用 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 个大列，每个列中有一个图像，在这个“范围”中，我的列被重置为 16，所以我不能将它除以 3。

我做对了吗？

【问题讨论】：

也许你是这样的：jsfiddle.net/9z4xrkbt/11
解决不了问题
你想把图片分成 4 列吗？
看图，主要有两栏，一栏是图片，一栏是分页。在带有图像的那个里面我有三列里面有图像。我想要 3 列中的图像，问题是我不能将 16（主网格列数）分成三列
我说 16 是因为当我在 .col-xs-12 列内插入一行时，它会重置为 16

标签： html css twitter-bootstrap grid

【解决方案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。

【讨论】：