如何使引导列内的 div 都具有相同的高度？答案

【问题标题】：How to make div inside bootstrap column all have the same height?如何使引导列内的 div 都具有相同的高度？
【发布时间】：2023-04-06 09:52:01
【问题描述】：

假设我有这个结构：

<div className="row">
    <div class="col-sm">
      <div>TEST</div>
    </div>

    <div class="col-sm">
      <div>TEST<br>TEST<br>TEST</div> 
    </div>
</div>

基本上，我知道如何使列具有相同的高度（使用行上的.equal 类）但是，我需要的是列的子 div 也具有相同的高度。目前，如果其中一个子 div 较短，它看起来不会对齐，因为我将背景颜色设置在子 div 中，而不是在 col-sm div 上。

出于灵活性原因，我无法在col-sm 上设置背景。例如。我可能需要在另一个不使用 'col-sm' 的部分中使用该子 div 组件。

我的目前是顶部的，我希望它成为底部的：

【问题讨论】：

这是您需要的吗？ - jsfiddle.net/86v39qha/3
@TiagoMartinho 它确实使它的高度相同，但它弄乱了宽度。最初 col-sm 使用 flex-basis: 0 和 flex-grow: 1
@David.J 认为完全不同的问题..
还有这个 - jsfiddle.net/86v39qha/16

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

像这样的情况，对我来说，是时候转向 jQuery 或插件 such as MatchHeight。

matchHeight 使所有选定元素的高度完全相等。

【讨论】：