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

Question

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

我试图用表格单元来解决这个问题，但我没有让它工作（其中一列总是比另一列小 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? 但 QA 是从 2013 年开始的。我想知道现在是否有更好的方法来解决这个问题，例如 flex-box 以及如何做它。我一直在看这里：http://getbootstrap.com.vn/examples/equal-height-columns/ 但它不适合我。

Answer 1

我认为你可以使用这个（flexbox 技术），只需在 class row 旁边添加 class row 和下面的 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;
}

希望为您提供帮助！

Answer 2

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