具有100%高度和边距底部的自举卡

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

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>

希望这可以帮助那些陷入困境的人.