具有100％高度和边距底部的引导卡 [英] Bootstrap cards with 100% height and margin bottom

问题描述

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

I am attempting to develop a grid of Bootstrap 4 cards with the following requirements:

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

• All cards must sit within one div class="row", because I don't know how many cards there will be total and I want rows to look good at different screen breakpoints.
• Columns within this row are sized differently at different breakpoints (e.g., col-sm-6 col-lg-4).
• Within any individual 'displayed row', e.g., one row of cards shown on the screen at any given time, each card should have the same height.
• Each card should have a margin at its bottom so that it is separated from all other cards.

我几乎可以一直到达那里，但是我遇到了一个问题:在卡上设置class="h-100"以确保它们的高度相同会杀死每张卡底部的边距.

I've managed to get almost all the way there, but I'm running into a problem: setting class="h-100" on my cards to ensure that they are all the same height kills the margin from the bottom of each card.

有没有一种方法可以确保显示的任何给定行中的所有卡都具有相同的高度，同时在其底部保留边距?

Is there a way to ensure that all cards within any given displayed row are the same height, while preserving a margin at the bottom of them?

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

推荐答案

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

After a little bit of experimentation, this one was easy to solve: I needed to add the mb-4 class to the containing column, not the card itself:

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

希望这可以帮助陷入困境的其他人摆脱困境.

Hopefully this helps others out who are stuck in my same situation.

这篇关于具有100％高度和边距底部的引导卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！