将底部与 Bootstrap 对齐

Question

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

下面是我的代码。我希望文本与底部的线对齐。我无法使用边距/填充，因为有时该文本将是多行。

如何垂直对齐到底部？

<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（原始答案）

正如这里所解释的，底部对齐在display:block.

使用显示表格单元格或弹性框与底部对齐。

带表格单元格

<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