Bootstrap4如何实现card-footer填充所在列的剩余高度

实现方案 #

只需要做两处改动即可实现需求：

1. 给所有.card元素添加h-100类，让卡片自动填满所在列的高度
2. 给所有.card-footer元素添加flex-grow-1类，Bootstrap的Card本身采用Flex布局，这个类会让footer自动占用容器内的剩余高度，card-body只会保留自身内容需要的高度。

修改后的完整代码如下：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>A</strong>
        </div>
        <div class="card-footer text-muted flex-grow-1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nisl sed commodo
            commodo. Donec nec lectus nec tortor feugiat accumsan id sit amet mauris. Nunc interdum
            ut arcu nec lobortis.
        </div>
      </div>
    </div>
    <div class="col-md-4">
     <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>B</strong>
        </div>
        <div class="card-footer text-muted flex-grow-1">
          Lorem ipsum
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>C</strong>
        </div>
        <div class="card-footer text-muted flex-grow-1">
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Justice Hirschi