Question

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

我使用的Bootstrap网格有max-width：1000px。在这个尺寸下，三根柱子的高度完全相同。问题是当屏幕变小并且它们具有不同数量的字符时，它们不会以相同的高度扩展。

到目前为止我尝试了什么？显示：表; Flexbox的;行当量高度; 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>

额外的列＆＃34; col-sm-12＆＃34;这是我在这里学到的一个技巧，以便在三个主要栏目之间留出空白区域。

CSS

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

Answer 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;

}

我无法使用相同的高度展开我的Bootstrap列

1 个答案: