css - 具有 100% 高度和边距底部的 Bootstrap 卡片

Question

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

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

我已经成功地完成了几乎所有的工作，但是我遇到了一个问题:设置 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 类添加到包含的列，而不是卡片本身:

<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>

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