要使两个Bootstrap 3列具有相同的高度,可以使用以下方法:
d-flex
类,然后在子容器上添加align-items-stretch
类。这将使子容器的高度自动适应父容器的高度。<div class="d-flex">
<div class="col-md-6 align-items-stretch">
<!-- 第一个列内容 -->
</div>
<div class="col-md-6 align-items-stretch">
<!-- 第二个列内容 -->
</div>
</div>
<div class="row">
<div class="col-md-6" id="column1">
<!-- 第一个列内容 -->
</div>
<div class="col-md-6" id="column2">
<!-- 第二个列内容 -->
</div>
</div>
<script>
var column1 = document.getElementById("column1");
var column2 = document.getElementById("column2");
var maxHeight = Math.max(column1.offsetHeight, column2.offsetHeight);
column1.style.height = maxHeight + "px";
column2.style.height = maxHeight + "px";
</script>
以上两种方法都可以实现两个Bootstrap 3列具有相同的高度。根据具体情况选择适合的方法。
领取专属 10元无门槛券
手把手带您无忧上云