具有不同图像高度的引导网格答案

【问题标题】：Bootstrap grid with different image heights具有不同图像高度的引导网格
【发布时间】：2016-06-27 16:03:08
【问题描述】：

我正在使用 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 放在一行中，但是当我链接列时，网格会中断。

有什么方法可以用这些图像获得正确的网格？我不需要像砖石风格的东西，只需要一个常规的引导网格。

感谢您的帮助！ :)

【问题讨论】：

您在每个col-md-6 之后尝试过<div class="clearfix"> 吗？
请在Snippet 中发布您的代码（HTML/CSS/JS）的最小工作示例。见minimal reproducible example 和How to Ask。
@M.Tanzil 方法也可以工作，您可以使用带有 nth-child 选择器的 :before / :after 伪类来做到这一点。

标签： css twitter-bootstrap grid-layout

【解决方案1】：

您需要每 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

【讨论】：

像魅力一样工作！谢谢！ :)

【解决方案2】：

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

将每一行包装到它自己的行中

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

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

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

希望这会有所帮助：P

【讨论】：