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

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

是的，我知道这个问题在这里被问到：How can I make Bootstrap columns all the same height?但质量保证是从2013年开始的。我想知道现在是否有更好的方法来解决这个问题，例如flex-box以及如何去做吧。我一直在这看：http://getbootstrap.com.vn/examples/equal-height-columns/但它对我不起作用。

Answer 1

你可以使用jquery。获取较高元素的高度并将其设置为较小的元素。有一个stackoverflow question about that，我过去曾使用它，但它确实有效。

Answer 2

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

的 HTML

<div class="row row-eq-height">  </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列上获得相同的高度？

2 个答案: