Question

他正是我想要实现的目标：

+-----------+-----------+-----------+
|   item 1  |  itme 2   | item 3    |
| .col-md-4 | .col-md-4 | .col-md-4 |
|           |           +-----------+
+-----------+           | item 6    |
|           |           | .col-md-4 |
|  item 4   +-----------+           |
| .col-md-4 | .col-md-4 |           |
|           | item 5    +-----------+
+-----------+           |
            |           |
            +-----------+

我怎样才能使用css实现这一目标？我不希望列出现在前一行最亮的.col-md-4 div底部的下一行。

我需要div来填充空格，以便它们彼此粘在一起而不会在每行之间留下空格。

这样的东西，但可以在不同的设备上正确缩放：http://codepen.io/desandro/pen/mIkhq

希望这很清楚。

Answer 1

最简单的方法是使用嵌套的列和行......有点像这样：

<div class="row">
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
</div>

Answer 2

有Jquery插件可以执行此操作，例如Masonry。

使Bootstrap列堆叠以形成Windows标题样式设计

2 个答案: