Bootstrap 张高度和底部边距为 100% 的卡片

Question

我正在尝试开发具有以下要求的 Bootstrap 4 张卡片的网格：

所有卡片必须在一个 div class="row" 内，因为我不知道总共有多少张卡片，我希望行在不同的屏幕断点处看起来不错。
此行中的列在不同断点处的大小不同（例如，col-sm-6 col-lg-4）。
在任何 individual 'displayed row' 中，例如，在任何给定时间屏幕上显示的一行卡片，每张卡片应具有相同的高度。
每张卡片的底部都应留有空白，以便与所有其他卡片分开。

我几乎一路走到了那里，但我运行遇到了一个问题：在我的卡片上设置 class="h-100" 以确保它们的高度相同会破坏每张卡片底部的边距。

有没有办法确保任何给定显示行中的所有卡片高度相同，同时保留它们底部的边距？

HTML代码：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

JSFiddle Demo

Answer 1

经过一些实验，这个问题很容易解决：我需要将 mb-4 class 添加到包含的列，而不是卡片本身：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

希望这能帮助其他遇到同样情况的人。

Bootstrap 张高度和底部边距为 100% 的卡片

Bootstrap cards with 100% height and margin bottom

css

height

margin

bootstrap-4

bootstrap-grid