Html 引导4卡页脚与页面底部不对齐

我使用的是Bootsrap 4 cards'class'card footer'，但页脚没有与页面底部对齐

这里是链接

作为特色的
特殊头衔待遇
此文本与页眉的距离应相等
和页脚

Lorem ipsum dolor sit amet，是一位杰出的领导者。纳拉姆
sapien sem、ornare ac、Nonumy non、lobortis a enim。南塞德
大地电磁仪。佩伦茨克居民莫尔比
这是一个非常有名的地方。
阿利夸姆·奥纳雷·维西·欧梅特斯。在enim中，一个ArcuMalesuada。
南奎斯努拉。利奥·卢克图斯·埃吉斯塔斯·维瓦摩斯。

此页脚应位于底部

卡必须是全高的。Bootstrap 4有一个

h-100

类，用于

高度：100%

<div class="container h-100">
<div class="card h-100 text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    ...
  </div>
  <div class="card-footer text-muted">
    This footer should be at the bottom
  </div>
</div>
</div>

作为特色的
特殊头衔待遇
...
此页脚应位于底部

---

我个人会从头开始制作我自己的页脚，但将此页脚与底部对齐的一种方法是在CSS中添加以下内容：

.card {
    height: 100vh;
}

---

我认为最简单的方法是给卡片页脚一个mt auto类

  <div class="card-footer mt-auto" >
    Whatever
  </div>

无论什么

foot

卡中的foot并不意味着要粘在页面底部，而是要粘在卡的底部是的，想不出任何方法。谢谢，这很有效。另外，我如何确保卡体中的所有内容都是中心对齐的wrt页眉和页脚

  <div class="card-footer mt-auto" >
    Whatever
  </div>