我无法让我的 Bootstrap 列以相同的高度展开答案

【问题标题】：I can't get my Bootstrap columns expand with the same height我无法让我的 Bootstrap 列以相同的高度展开
【发布时间】：2023-04-11 06:52:01
【问题描述】：

首先，我知道这个问题已经被问过好几次了，我尝试了所有找到的解决方案。这就是我再次询问的原因。

我正在使用的 Bootstrap 网格的最大宽度为：1000 像素。在这个尺寸下，三根柱子的高度完全相同。问题是当屏幕变小并且由于字符数不同时，它们不会以相同的高度展开。

到目前为止，我尝试了什么？显示：表格；弹性盒；行-eq-高度； matchheight.js。

Codepen：https://codepen.io/anon/pen/qPQjjp 尝试调整浏览器窗口的大小，您会看到一列比另一列大，具体取决于窗口大小。

<div class="feature1">
        <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div>
        <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div>
        <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div>
      </div>

额外的列“col-sm-12”是我在这里学到的一个技巧，目的是在三个主要列之间留出一个空白。

CSS

.feature1 {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: 1000px;
}

【问题讨论】：

你能给一个codepen或jsfiddle让我们看看你有什么代码吗？
@JackMoody 确定 codepen.io/anon/pen/EwOmpP
我不确定我是否理解您的问题。不管盒子里有多少单词，你想让你的盒子有相同的高度吗？
@JackMoody 是的，这就是我想要的。就像在一张桌子上。否则我将不得不为各种屏幕尺寸设置固定高度，但我不希望这样。
调整大小时，codepen 中的框看起来大小相同。可能图片尺寸不同，所以我看不出区别。

标签： css twitter-bootstrap grid

【解决方案1】：

adobe.com 上 Dreamwaver 论坛的一个人帮助了我。这实际上是唯一有效的解决方案。

就我而言，这就是我应该使用的 CSS：

.feature1 {

display: flex;

flex-wrap: wrap;

margin-left: auto;

margin-right: auto;

max-width: 1000px;

}

.col-sm-4 {

display: flex;

}

.well {

flex: 1;

}

.well h3 {

text-align: center;

}

.well figure {

text-align: center;

}

【讨论】：