21

我正在尝试开发具有以下要求的 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 演示

4

1 回答 1

31

经过一些实验，这个很容易解决：我需要将 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>

希望这可以帮助其他陷入我同样情况的人。

于 2017-12-15T22:25:23.237 回答