Выровняйте низ с помощью Bootstrap

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

twitter-bootstrap bootstrap-4 vertical-alignment bootstrap-5

08.02.2019 18:55

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

533

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Bootstrap 5 (обновление 2021 г.)

mt-auto или align-self-end по-прежнему можно использовать для выравнивания содержимого по нижнему краю в div flexbox (d-flex).

Bootstrap 4 (оригинальный ответ)

Как объяснил здесь, выравнивание по нижнему краю не работает внутри display:block.

Используйте display table-cell или флексбокс для выравнивания по нижнему краю.

с ячейка таблицы

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

при использовании флексбокс работают автоматические поля. Например, 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

08.02.2019 19:03

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

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

08.02.2019 19:04

Другие вопросы по теме

Как отобразить мои элементы в строке (используя php и bootstrap для отображения всех элементов из базы данных)

Проверка файлов cookie PHP не работает внутри Bootstrap Navbar

Почему некоторые медиа-запросы с максимальной шириной используют .98px

Проверка начальной загрузки для выбора в зависимости от того, что выбрано при первом выборе?

Изменить scrollTop содержимого вкладки при изменении навигационной вкладки

Bootstrap rowspan и выравнивание элемента управления снизу вверх

Отклик изображения содержимого столбца Bootstrap

Модальное окно Bootstrap 4 не загружается, а только дает выцветший экран

Я создал модальный бутстрап на сайте. но я не могу открыть модальное всплывающее окно в браузере Safari?

Выровнять диапазон по правому краю и выровнять заголовок по левому краю по вертикали

Выровняйте низ с помощью Bootstrap

Ответы 2

Другие вопросы по теме

Похожие вопросы