0

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

我试图用 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 年解决这个问题的最佳方法是什么。

是的，我知道这里会问这个问题：如何使 Bootstrap 列的高度都相同？但是那个 QA 是从 2013 年开始的。我想知道现在是否有更好的方法来解决这个问题，例如 flex-box 以及如何做到这一点。我一直在看这里：http : //getbootstrap.com.vn/examples/equal-height-columns/ 但它不适合我。

4

2 回答 2

0

您可以为此使用 jquery。获取较高元素的高度并将其设置为较小的元素。有一个关于这个的stackoverflow问题，我过去使用过它并且它有效。

于 2015-08-18T11:08:00.400 回答
0

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

跳这个对你的帮助！

于 2015-08-18T11:18:03.577 回答