Совместите нижнюю часть с Bootstrap 4 - PullRequest
Новая
       22

Совместите нижнюю часть с Bootstrap 4

0 голосов
/ 08 февраля 2019

Похоже, что выравнивание снизу не работает для меня в 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/

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Вы можете выровнять текст снизу следующим образом: 

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

0 голосов
/ 08 февраля 2019

Как объяснено здесь , выравнивание по низу не работает внутри 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>

Демо: https://www.codeply.com/go/SOtL0ovFZR

...