当使用Bootstrap "row“和"col-lg-3”类时，所有列都会得到最长列的高度。如何解决这个问题？

<div class="row">
  <div class="col-lg-3 custom-height">Column 1</div>
  <div class="col-lg-3 custom-height">Column 2</div>
  <div class="col-lg-3 custom-height">Column 3</div>
</div>

.custom-height {
  height: 200px; /* 设置固定的高度 */
}

<div class="row d-flex">
  <div class="col-lg-3 flex-fill">Column 1</div>
  <div class="col-lg-3 flex-fill">Column 2</div>
  <div class="col-lg-3 flex-fill">Column 3</div>
</div>

<div class="row">
  <div class="col-lg-3">Column 1</div>
  <div class="col-lg-3">Column 2</div>
  <div class="col-lg-3">Column 3</div>
</div>

<script>
$(document).ready(function() {
  var maxHeight = 0;
  $('.row .col-lg-3').each(function() {
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  $('.row .col-lg-3').height(maxHeight);
});
</script>