html – Bootstrap 4列相同高度的卡片

Bootstrap 4列相同高度的卡片

Bootstrap是一款常用于web开发的框架，其中的card组件可用于构建漂亮的卡片。但在实际应用中，我们经常面临着一个问题，那就是如何让卡片列表中的每一列的高度相等。本文将介绍两种方法来解决这个问题。

1. 使用flex

flex是一种CSS布局方式，可以用来实现等高的列。可以用justify-content和align-items属性来控制列的水平和垂直方向的排列方式，将其设置为flex-start能够让列元素从上到下排列。

首先，我们先定义一个包含多个card的row：

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <div class="card">...</div>
      </div>
      <div class="col-md-4">
         <div class="card">...</div>
      </div>
      <div class="col-md-4">
         <div class="card">...</div>
      </div>
      ...
   </div>
</div>

接下来，通过给row添加`d-flex flex-wrap`类，使其可以使用flex布局并让其子元素换行，然后设置每一个包含card的列元素为`d-flex flex-column`，使其以列元素的形式垂直排列，最后给card元素添加`flex-grow-1`类，使其可以填充空白的部分，即：

<div class="container">
   <div class="row d-flex flex-wrap">
      <div class="col-md-4 d-flex flex-column">
         <div class="card flex-grow-1">...</div>
      </div>
      <div class="col-md-4 d-flex flex-column">
         <div class="card flex-grow-1">...</div>
      </div>
      <div class="col-md-4 d-flex flex-column">
         <div class="card flex-grow-1">...</div>
      </div>
      ...
   </div>
</div>

这样就可以让每一列的高度相等了。

2. 使用jquery

另一种方法是使用jquery来计算出每一列的最大高度，并将其他列的高度也设置为最大高度。首先，我们需要给每一个card元素添加一个自定义的class，比如说.card-equal-height。

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <div class="card card-equal-height">...</div>
      </div>
      <div class="col-md-4">
         <div class="card card-equal-height">...</div>
      </div>
      <div class="col-md-4">
         <div class="card card-equal-height">...</div>
      </div>
      ...
   </div>
</div>

然后，我们可以使用jquery来计算每一列的最大高度并将其他列的高度也设置为最大高度。代码如下：

<script>
$(document).ready(function() {
   var maxHeight = -1;
   $('.card-equal-height').each(function() {
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });
   $('.card-equal-height').each(function() {
      $(this).height(maxHeight);
   });
});
</script>

这样就可以让每一列的高度相等了。

总结

本文介绍了两种方法来让Bootstrap 4的卡片列表中的每一列的高度相等。第一种方式是使用flex布局，第二种方式是使用jquery计算高度并设置高度。你可以根据自己的需要选择适合自己的方法。