Question

我有以下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>

我希望日期始终位于第二行的底部。也许图片更好地说明了问题。前三个日期与Flexbox底部的第四个日期不在同一行：

Answer 1

无法平等地将分离 flexbox父级子级中的子级内容对齐。但是，您可以使用d-flex然后使用mt-auto（margin-top:auto）将列也设置为flexbox容器，以将日期推到列的底部。

        <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 cards - vertical alignment body with variable header line rows

Answer 2

您可以拉伸date容器，以flex:1填充行的剩余空间，并使用align-items:flex-end将所有内容对齐到底部：-）

我在下面稍加修改了您的示例，实际上您不需要在.row内增加wrapper-col-lg-12应该是您的全部需要包装到下一行。

我只添加了border:white 1px solid;，以便您可以看到我的解决方案的工作原理-您可以忽略它。

（您可能需要全屏查看堆叠的元素才能正常工作！）

.wrapper {
  display: flex;
  flex-direction: column;
  background: #1D3159;
  color: white;
}

.date {
  background: #1D3159;
  color: white;
  flex: 1;
  display: flex;
  align-items: flex-end;
  border:white 1px solid;
}

<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">
<!-- just for this example -->

<div class="row">
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible here are different heights possible here are different heights possible here are different heights possible here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
</div>

底部具有高度的Flexbox中所有高度相同的div

2 个答案: