要使两个Bootstrap cols的高度相同,可以使用以下方法:
d-flex
类,这将启用Flexbox布局。然后,为每个col添加flex-fill
类,使它们平均分配父容器的高度。<div class="d-flex">
<div class="col flex-fill">Col 1</div>
<div class="col flex-fill">Col 2</div>
</div>
<div class="row">
<div class="col" id="col1">Col 1</div>
<div class="col" id="col2">Col 2</div>
</div>
<script>
$(document).ready(function() {
var col1Height = $("#col1").height();
var col2Height = $("#col2").height();
if (col1Height > col2Height) {
$("#col2").height(col1Height);
} else {
$("#col1").height(col2Height);
}
});
</script>
这段代码通过比较两个col的高度,并将较小的高度设置为较大的高度,从而使它们的高度相同。
以上是使两个Bootstrap cols的高度相同的两种方法。无论你选择哪种方法,都可以根据实际情况选择适合的方式来实现相同的高度效果。
关于Bootstrap的更多信息和使用方法,你可以参考腾讯云的Bootstrap产品介绍页面:Bootstrap产品介绍
领取专属 10元无门槛券
手把手带您无忧上云