时间戳

首页 > 解决方案 > flexbox中所有高度相同的div在底部

twitter-bootstrap - flexbox中所有高度相同的div在底部

问题描述

我有以下 html 来使用 bootstrap 4 构建网格。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
        here are different heights possible
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  
</div>

我希望日期始终位于第二行的底部。也许这张图片更好地解释了这个问题。前三个日期与弹性框底部的第四个日期不在同一条线上：

在此处输入图像描述

标签： twitter-bootstrapcssflexboxbootstrap-4

解决方案

没有办法平等地对齐不同flexbox 父级的子级中的内容。d-flex但是，您可以使用然后mt-auto( )使列也成为 flexbox 容器margin-top:auto，将日期推到列的底部。

        <div class="col-sm-12 col-md-3 d-flex flex-column">
            <div class="row">
                <div class="col-lg-12">
                    here are different heights possible
                </div>
            </div>
            <div class="row mt-auto">
                <div class="col-lg-12 date">
                    date
                </div>
            </div>
        </div>

演示：https ://www.codeply.com/go/gLYW7liCfc

另请参阅：bootstrap 4 卡 - 具有可变标题行行的垂直对齐主体

推荐阅读