Question

我正在使用Twitter Bootstrap 3创建一个简单的布局。这是我到目前为止所拥有的

<div class="container">
    <div class="row">
        <div class="col-xs-3 red">
            <h3>Column 1 Content</h3>
            <img class="img-responsive" src="http://dummyimage.com/300x400/000/fff">
        </div>
        <div class="col-xs-3 blue">
            <h3>Column 2 Content</h3>
                        <img class="img-responsive" src="http://dummyimage.com/300x600/000/fff">
        </div>
        <div class="col-xs-3 green">
            <h3>Column 3 Content</h3>
                        <img class="img-responsive" src="http://dummyimage.com/300x100/000/fff">
        </div>
        <div class="col-xs-3 yellow">
            <h3>Column 4 Content</h3>
            <p>This is some dummy content</p>
        </div>
    </div>
</div>

http://jsfiddle.net/5L8w6zr0/

我现在要做的是以下......

每列应该是相同的高度
每列之间应该有一个空格

我试图通过为每一列添加一个边距来实现这个空间，但这只会将事情推到下一行。

有人可以提出解决方案吗？

Answer 1

Bootstrap在列元素中使用填充而不是边距，因此您希望在内容周围包裹div并将颜色类移动到内部div。

有关身高问题，请参阅此答案：How can I make Bootstrap columns all the same height?

Answer 2

你需要的是一个类似布局的表，因为你的列需要具有相同的高度，因此我建议使用display:table作为容器，display: table-row作为.row和{{1你的cols。

如果您的布局需要在特定点之后中断，那么对于小屏幕，您可以使用媒体查询重写显示属性

Here's an update fiddle

Twitter Bootstrap - 列之间的边距和相等的高度

2 个答案: