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

我正在用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>

{{result.title}


从{result.album}


由{{result.artist}}

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

所以我不能将这两个col-md-6放在一行中，但是当我链接列时，网格被破坏了

有没有办法用这些图像获得正确的网格？我不需要像砖石风格的东西，只是一个常规的引导网格

---

谢谢你的帮助！：）

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

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

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

内容

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

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

---

希望这有帮助：p

您需要每隔2

col-md-6

添加一些内容，以确保左侧浮动清除

一种方法是使用，另一种方法是像这样使用CSS重置

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

---

您是否在每次

col-md-6

之后都尝试过

？请在下面的文章中发布您的代码（HTML/CSS/JS）的最简单的工作示例。请参阅和.@M.Tanzil方法也可以使用，您可以使用带有第n个子选择器的：before/：after伪类来执行此操作。工作起来很有魅力！谢谢！：）