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

查看：20
本文介绍了具有 100% 高度和底部边距的 Bootstrap 卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我几乎已经做到了，但我遇到了一个问题:在我的卡片上设置 class="h-100" 以确保它们都是一样的高度会杀死每张卡片底部的边距.

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

HTML 代码:

<div class="row"><div class="col-md-4 col-sm-6"><div class="card h-100 mb-4" style="background-color:#ff0000;">测试卡片内容.

<div class="col-md-4 col-sm-6"><div class="card h-100 mb-4" style="background-color:#00ff00;">测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.

<div class="col-md-4 col-sm-6"><div class="card h-100 mb-4" style="background-color:#0000ff;">测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.

<div class="col-md-4 col-sm-6"><div class="card h-100 mb-4" style="background-color:#0f0f0f;">测试卡片内容.

JSFiddle 演示

解决方案

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

<div class="row"><div class="col-md-4 col-sm-6 mb-4"><div class="card h-100" style="background-color:#ff0000;">测试卡片内容.
<div class="col-md-4 col-sm-6 mb-4"><div class="card h-100" style="background-color:#00ff00;">测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.
<div class="col-md-4 col-sm-6 mb-4"><div class="card h-100" style="background-color:#0000ff;">测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.测试卡片内容.
<div class="col-md-4 col-sm-6 mb-4"><div class="card h-100" style="background-color:#0f0f0f;">测试卡片内容.

希望这能帮助其他陷入同样情况的人.

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

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

<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

解决方案

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% 高度和底部边距的 Bootstrap 卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆