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

> cluster.dtw.h_1.d <-list()
> for (i in 2:10)
{
  cluster.dtw.h_1.d[[i]] <- tsclust(mydata, type = "h", k = i,  distance = "dtw_basic", centroid = "dba",control = hierarchical_control(method = "complete"), seed = 390, preproc = NULL, args = tsclust_args(dist = list(window.size =30L)))
}

现在请使用您想要的高度

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

2 个答案: