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

bq9c1y66 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(142)

此问题在此处已有答案：

How can I make Bootstrap columns all the same height?（34个答案）
七年前就关门了。
我有两个栏，我想有在相同的高度。这两个都是调整高度后的内容（高度自动）。所以有时我的一栏有一个更大的高度比另一个。我希望他们在相同的高度（并调整后的内容）。
我试过用table-cell来解决这个问题，但是我没有让它工作（其中一列总是比另一列小10 px左右）。我也试过用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;
}

是的，我知道这个问题是在这里举例问的：How can I make Bootstrap columns all the same height?，但QA是从2013年。我想知道，如果有一个更好的方法来解决这个问题，现在adays，与例子flex-box和如何做到这一点。我一直在寻找这里：但是这对我不起作用。

twitter-bootstrap

来源：https://stackoverflow.com/questions/32070239/how-to-get-the-same-height-on-two-bootstrap-columns

2条答案

按热度按时间

7rfyedvj1#

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

希望这对你有帮助！

赞(0）回复(0）举报 2022-12-07

4dbbbstv2#

你可以用jquery来做这个。得到高的元素的高度，然后把它设置成小的。有一个stackoverflow question about that，我过去用过它，它很好用。

赞(0）回复(0）举报 2022-12-07