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

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 放在一行中，但是当我链接这些列时，网格会被破坏。

有什么方法可以用这些图像得到正确的网格吗？我不需要砖石风格的东西，只需要一个普通的 bootstrap 网格。

感谢您的帮助！ :)

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 具有不同图像高度的网格

Bootstrap grid with different image heights

css

grid-layout

twitter-bootstrap