时间戳

首页 > 解决方案 > Boostrap 4 响应式卡片组等高卡片页脚

html - Boostrap 4 响应式卡片组等高卡片页脚

问题描述

我已经使用 bootstrap 4card-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>

电流输出： 在此处输入图像描述

期望的输出： 在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

.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;
}

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

推荐阅读