将底部与 Bootstrap 对齐

Question

在 Bootstrap 4 中对齐底部似乎对我不起作用。

下面是我的代码。我希望文本与底部的行对齐。我不能使用 margin/padding，因为有时，这段文字会是多行。

如何垂直对齐底部？

<div style="height:55px !important;">
  <span class="align-bottom">
    This text should align to bottom, closer to the line
  </span>
</div>
<div class="border-top">
    Other content below the line
</div>

JSFiddle：https://jsfiddle.net/wqeah67v/

Answer 1

Bootstrap 5（2021 年更新）

mt-auto 或 align-self-end 仍可用于底部对齐 flexbox 中的内容 (d-flex) div.

Bootstrap 4（原答案）

由于 explained here，底部对齐在 display:block 中不起作用。

使用显示 table-cell 或 flexbox 对齐底部。

与table-细胞

<div style="height:55px !important;" class="align-bottom d-table-cell">
  <span>
    This text should align to bottom, closer to the line
  </span>
</div>

当使用 flexbox 时，自动边距起作用。例如 margin-top: auto

<div style="height:55px !important;" class="d-flex">
  <span class="mt-auto">
    This text should align to bottom, closer to the line
  </span>
</div>

或者，

<div style="height:55px !important;" class="d-flex">
  <span class="align-self-end">
    This text should align to bottom, closer to the line
  </span>
</div>
<div class="border-top">
    Other content
</div>

演示：https://codeply.com/go/SOtL0ovFZR

Answer 2

您可以按如下方式在底部对齐文本：

<div style="height:55px !important; position: relative;">
  <span class="align-bottom" style="position: absolute;bottom:0;">
    This text should align to bottom, closer to the line
  </span>
</div>
<div class="border-top">
    Other content
</div>

工作 jsfiddle link 是：https://jsfiddle.net/ez7rbk1u/

将底部与 Bootstrap 对齐

Align bottom with Bootstrap

vertical-alignment

twitter-bootstrap

bootstrap-4

bootstrap-5