如何在两个 Bootstrap 列上获得相同的高度？

Question

我有两列我想要在同一高度。两者都在内容之后调整高度（高度自动）。所以有时我的一个专栏的高度比另一个高。我希望它们处于相同的高度（并根据内容进行调整）。

我试图用 table-cell 解决这个问题，但我没有让它工作（其中一列总是比另一列小 10px 左右）。我也尝试过使用 row-eq-height 但这没有任何区别。

谁能告诉我最好的方法是让两个平行的 BS 列（代码中的 col-md-3 和 col-md-7）获得相同的高度，并自动调整内容？

这是我的标记：

<div class="row"> <!-- START BS ROW -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
        <div class="singleheader-list-style"> <!-- START SINGLEHEADER-LIST-STYLE -->
            <!-- CONTENT -->
        </div>
    </div> <!-- END BS COL-MD-3 -->
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-7 -->
        <div class="singleheader-content-style"> <!-- START SINGLEHEADER-CONTENT-STYLE -->
            <!-- CONTENT -->
        </div> <!-- END SINGLEHEADER-CONTENT-STYLE -->
    </div> <!-- END BS COL-MD-7 -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
</div> <!-- END BS ROW -->

这是我的 CSS:

/***** SINGLEHEADER CONTENT AREA STYLING *****/

.singleheader-content-style {
    background-color:#fff;
    border-right: 1px solid #9c9c9c;
    padding:20px;
}

.singleheader-content-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change bootstrap default */
    color:#de1b1b;
}

/***** SINGLEHEADER LIST AREA STYLING *****/

.singleheader-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    padding:20px;
}

.singleheader-list-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change bootstrap default */
    color:#de1b1b;
}

我知道之前有人在 SO 上问过这个问题，但是那些 QA 是旧的（从 2013 年开始）。因为我猜 Boostraps 从那时起就已经更新了。我创建了一个新问题，看看在 2015 年解决这个问题的最佳方法是什么。

是的，我知道这里有人问这个问题：How can I make Bootstrap columns all the same height? but that QA is from 2013. I want to know if there is a better way to solve this now adays, with example flex-box and how to do it. I have been looking here: http://getbootstrap.com.vn/examples/equal-height-columns/但它对我不起作用。

Answer 1

您可以使用 jquery。获取较高元素的高度并将其设置为较小的元素。有一个 Whosebug question about that，我过去用过它并且有效。

Answer 2

我认为你可以使用这个（flexbox 技术），只需在 class row 旁边添加 class row-eq-height 和 css 如下（和一个稍微修改一下你的 css)

HTML

<div class="row row-eq-height">
    <!--Whatever content you want-->
</div>

CSS

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.singleheader-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    padding:20px;
    height:100% /*--New Attribute--*/
}
.singleheader-content-style {
    background-color: #fff;
    border-right: 1px solid #9c9c9c;
    height: 100%; /*--New Attribute (just for sure in case your left col taller)--*/
    padding: 20px;
}

希望对您有所帮助！

如何在两个 Bootstrap 列上获得相同的高度？

How to get the same height on two Bootstrap columns?

html

css

two-columns

twitter-bootstrap