Question

我正在使用CSS和Bootstrap 3制作动态专辑艺术网格，当所有图像按1：1缩放时，一切正常。但是当一个图像没有像这样缩放时，我的网格会断开。以下是我的问题的屏幕截图：

生成网格的代码如下所示：

<div class="row">
    <div class="col-md-6 panel panel-default" v-for="result in results">
        <img src="{{ result.art }}" />
        <strong>{{ result.title }}</strong>
        <br />
        from <strong>{{ result.album }}</strong>
        <br />
        by <strong>{{ result.artist }}</strong>
    </div>
</div>

我正在使用Vue.js作为此模板。

所以我不能将这两个col-md-6放在一行，但是当我链接列时，网格就会断开。

有没有办法用这种图像获得正确的网格？我不需要像砌体式的东西，只需要一个常规的自举网格。

感谢您的帮助！：）

Answer 1

有几种方法可以实现这一目标。

将每一行包裹在其自己的行

中

<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>

您还可以为每个项目设置最小高度，这样它们将始终保持相同的高度。

最后，您不能使用bootstrap网格系统并使用display：inline-block构建自己的网格;只需确保在每个元素上设置负边距并将v-align设置为顶部。

希望这会有所帮助：P

Answer 2

您需要每2 col-md-6添加一些内容，以确保左浮动清除..

一种方法是使用Bootstrap's clearfix reset，另一种方法是使用像这样的CSS重置..

@media (min-width: 768px) {
    .row > .col-md-6:nth-child(2n+1) {
        clear: left;
    }
}

http://www.codeply.com/go/oAiZNlWgau

Bootstrap网格具有不同的图像高度

2 个答案: