我正在使用Bootstrap.如何将三根柱子制成相同的高度?
这是问题的屏幕截图.我希望蓝色和红色的列与黄色列的高度相同.

这是代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-4 panel" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-xs-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
免责声明.这个问题被问很多之前倍.但是由于时间已经过去,现在我们接近Bootstrap 4发布并且支持完整的flexbox,现在是时候为同一个问题找到新的答案了.
我想用Bootstrap 4创建相等的列高度.这是预期结果的演示:

我想要一个适用于Bootstrap 4支持的所有浏览器的解决方案.如果没有涉及JS,那就更好了.一些现有的解决方案基于Bootstrap 3,有些不适用于MacOS上的Safari.
更新.似乎我做错了研究.默认情况下,Bootstrap 4的高度相同.我已经包含了一个带有插图的更新图像.你不需要做任何事情,它已经存在了.