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

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

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


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


我试图通过在每列上增加边距来实现空间，但这只是将内容推到下一行。

谁能提出解决方案？

最佳答案

Bootstrap在列元素内部使用填充而不是空白，因此您需要在内容周围包裹一个div并将颜色类移动到该内部div。

有关高度问题，请参见以下答案：How can I make Bootstrap columns all the same height?