具有不同图像高度的Bootstrap网格 [英] Bootstrap grid with different image heights

问题描述

我正在使用CSS和Bootstrap 3的动态专辑封面网格，一切工作正常，当所有的图像缩放1：1。但是，当一个图像发生不按比例缩放，我的网格打破。这是我的问题的屏幕截图：

I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:

截图

但是我

But what I want is

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

The code to generate the grid looks like this:

<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。

I'm using Vue.js for this template.

所以我不能把这两个col-md-6放在一行，但是当我链接列的网格正在打破。

So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.

任何方式来获得一个正确的网格与这些类型的图像？我不需要像砖石风格的东西，只是一个常规的bootstrap网格。

Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.

感谢您的帮助！ ：）

推荐答案

您需要每2个添加一些 col-md-6 确保左边的浮动清除..

You need to add something every 2 col-md-6 to ensure the left floats clear..

一种方法是使用 Bootstrap的clearfix重置，另一种方式是使用像这样的CSS重置。

One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..

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

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

这篇关于具有不同图像高度的Bootstrap网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！