Question

在同一行中有两列，我希望较短的列扩展其高度以匹配较高的列。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

#small-col {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor.
    </div>

    <div class="col-xs-4" id="small-col">
        Aliquam eget fermentum magna, nec congue diam.
    </div>
</div>

Answer 1

您可以使用一些CSS规则轻松完成

＆＃13;

#small-col {
    background-color: blue;
}
.row {
    display: table;
}
.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor.
  </div>

  <div class="col-md-4" id="small-col">
    Aliquam eget fermentum magna, nec congue diam.
  </div>
</div>

＆＃13;

更新：这是一种响应方式。

您可以使用jQuery代码来执行此操作。

只需将.same-height放置到您要定位的div。

然后将此代码添加到您的JavaScript文件中：

    boxes = $(".same-height");
    maxHeight = Math.max.apply(Math, boxes.map(function () {
        return $(this).height()
    }).get());
    boxes.height(maxHeight);

Answer 2

我通常使用一些技巧，将较短列的背景颜色应用于行元素，然后将背景颜色应用于较高的列：

＆＃13;

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
#small-col {
    background-color: blue;
}
#big-col {
    background-color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row" id="small-col">
  <div class="col-xs-8" id="big-col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor.
  </div>

  <div class="col-xs-4">
    Aliquam eget fermentum magna, nec congue diam.
  </div>
</div>

＆＃13;

使列具有相同的高度

2 个答案: