对准底部与引导4

Question

对齐底部似乎并不在引导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

作为explained here，对准底部display:block内不起作用。

使用显示表单元格或Flexbox的对齐底部。

<div style="height:55px !important;" class="align-bottom d-table-cell">
  <span>
    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>

但是：四联zxsw POI

Answer 2

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

https://www.codeply.com/go/SOtL0ovFZR

工作的jsfiddle链接是：

<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>