使Bootstrap列调整到相邻列的高度

Question

我希望两个引导列始终具有相同的大小。这是场景：

我希望带有文本的列的高度始终与左侧的图片相同。

这是我的标记（简化）：

<div class="row">
    <div class="col-xs-8" id="brand-slider">
        <div class="flexslider">
            <ul class="slides">
               <slides>
            </ul>
        </div>
    </div>
    <div class="col-xs-4" id="brand-aside">
        <div class="brand-aside-content">
          <text-content>  
        </div>
    </div>
</div>

我在堆栈和其他地方读过许多类似的主题，但我找不到可行的解决方案。他们中的大多数都以某种方式复杂化。

在我正在研究的另一个项目中，我通过设置一个JS脚本来实现这一效果，该脚本始终计算一列的高度并将其应用于相邻列。但是，我认为有一个更简单的解决方案。

非常感谢您的建议。

Answer 1

有两种方法可以解决这个问题：

CSS：

使用min-height并垂直居中。

JS

获取所有列的高度，比较它们以获得最高值，并将该高度应用于所有列。

你的JS解决方案是最干净的，CSS可能更简单，但你最终可能会为两个列增加高度，甚至不能为其中一个列设置足够大的最小高度并减少内容

Answer 2

你可以使用CSS 3 flexbox ..

.equal, .equal > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

http://codeply.com/go/4Mk1bavvby

Answer 3

您现在可以在constructing Masonry-like columns中使用Cards for Bootstrap 4。