Bootstrap 4 响应式卡片组等高卡片页脚

Question

我已经使用 bootstrap 4 card-deck 类实用程序设置了响应式卡片布局。一切似乎都按预期工作，尽管我想排列页脚的顶部，而不是简单地底部对齐 footer 并允许它向上溢出的默认行为。我不确定如何使用 flex 在每行的基础上应用等高的页脚？我不想为此使用 js，因为我已经设法仅使用 flex 构建了整个页面。

JsFiddle：http://jsfiddle.net/nus1v4ak/4/

<div class="container">
  <ul class="card-deck">
    <li class="col-xs-4 card col-sm-4 col-lg-3">
      <div class="card-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
      </div>
      <div class="card-footer">
        <p>paragraph 1</p>
      </div>
    </li>

    <!-- more <li> elements as above but with random content of different sizes -->

  </ul>
</div>

电流输出：

期望的输出：

Answer 1

.card:nth-child(1) .card-footer,
.card:nth-child(2) .card-footer,
.card:nth-child(3) .card-footer {
  height: 100px;
}

我的建议是把这个添加到你分享的小提琴的 CSS 中，你也可以检查结果！！ 我已经将:nth-child() 属性与主要.card 类一起使用并应用了效果...您仍然可以要求任何解释！

每个页脚的高度相同-

.card-footer {
  height: 100px;
}

无论内容如何，​​每个页脚都将应用 100px 的高度！！！

基于设备屏幕宽度的响应高度-

.card-footer {
  height: 5vw;
}

现在你的高度是响应式的，并且会根据浏览器屏幕的需要和尺寸而改变，高度不再是短（小）或恒定的了！！

Answer 2

Check this fiddle

.card:nth-child(1) .card-footer,
.card:nth-child(2) .card-footer,
.card:nth-child(3) .card-footer {
  height: 100px;
}

请立即使用您想要的高度