要使Bootstrap列具有相同的高度,可以使用以下方法:
d-flex
类,然后在每个列上添加align-items-stretch
类。这将使每个列的高度相等。<div class="d-flex">
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
</div>
<div class="row">
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
</div>
<script>
$(document).ready(function() {
var maxHeight = 0;
$(".col").each(function(){
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".col").height(maxHeight);
});
</script>
这将遍历每个列,并将它们的高度设置为最大高度。
display: grid
样式,并使用grid-template-columns
属性来定义列的宽度。<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
<div class="col">
<!-- 内容 -->
</div>
</div>
这将创建一个具有相同宽度的三列布局。
以上是使Bootstrap列具有相同高度的几种方法。根据具体情况选择适合的方法。
DBTalk
DB TALK 技术分享会
云+社区沙龙online [技术应变力]
云+社区沙龙online第6期[开源之道]
技术创作101训练营
云+社区技术沙龙[第16期]
云+社区技术沙龙[第11期]
DB TALK 技术分享会
云+社区技术沙龙 [第31期]
T-Day
领取专属 10元无门槛券
手把手带您无忧上云