0

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

4

2 回答 2

2

引导程序 5（2021 年更新）

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

Bootstrap 4（原始答案）

正如这里所解释的， align bottom 在display:block.

使用 display table-cell 或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>

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

于 2019-02-08T18:03:53.520 回答
1

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

<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 链接是：https ://jsfiddle.net/ez7rbk1u/

于 2019-02-08T18:04:02.280 回答