Выравнивание элементов по нижнему краю в Bootstrap

Быстрый ответ

Для выравнивания элементов по нижнему краю в Bootstrap можно использовать сочетание свойств flexbox. К родительскому контейнеру добавьте классы d-flex flex-column для вертикальной компоновки и класс mt-auto к строке сетки, что позволит "прижать" её к нижнему краю.

<div class="container-fluid d-flex flex-column" style="height: 300px;">
  <div class="row mt-auto">
    <div class="col">
      <!-- Здесь будет располагаться ваш контент, выровненный по нижнему краю -->
    </div>
  </div>
</div>

Этот метод простой и эффективный для закрепления контента у нижнего края.

Методы выравнивания в Bootstrap

Помимо flexbox, рассмотрим другие способы выравнивания элементов по нижнему краю и возможные специфические сценарии.

Преимущества Flexbox

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

.row {
  display: flex;
  align-items: flex-end;
}

Убедитесь только, что пользователи не используют устаревшие браузеры.

Подробнее об этом расскажет наш спикер на видео

Адаптивность с помощью медиа-запросов

Для сохранения адаптивности можно использовать комбинацию медиа-запросов и flexbox:

@media (min-width: 768px) {
  .align-bottom-md {
    align-self: flex-end;
  }
}

Соглашение об именовании классов в Bootstrap

Создавая новые классы стилей, старайтесь следовать именованию, принятому в Bootstrap, например, mt-auto-md:

.mt-auto-md {
  @media (min-width: 768px) {
    margin-top: auto;
  }
}

Возможно, в будущем ваш класс станет частью Bootstrap!

Преимущества LESS

Для пользователей Bootstrap версии 3 может быть удобно использовать LESS для создания миксинов:

.bottom-align-mixin() {
  display: inline-block;
  vertical-align: bottom;
  float: none;
}
.col-bottom {
  .bottom-align-mixin();
}

AngularJS для динамического выравнивания

Если вы работаете с AngularJS, используйте его функциональность для адаптивного выравнивания:

app.directive('pullDown', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // Здесь наступает черед AngularJS.
    }
  };
});

Визуализация

Без выравнивания:
📘
📗📗
📘📕📕
📘📗📕📙
📘📗📕📙📔

Как товарищ, который отказывается располагаться в одном ряду.

После выравнивания:
      📘
      📗
 📘  📕
 📘📗📕
📘📗📕📙📔

С align-items-end все выглядит гармонично. Все элементы правильно расположены!

Практическое применение стратегий выравнивания

Уточняйте методы выравнивания ваших проектов, добавляя к макетам особая изюминка.

jQuery или чистый CSS?

jQuery является мощным инструментом, но он не так адаптивен, как методы CSS. Адаптивность действительно важна для жидких макетов.

Борьба с пробелами

С помощью display: inline-block иногда возникают трудности с выравниванием. Устраните их, убрав пробелы с использованием размера шрифта:

.row-zero-space {
  font-size: 0;
  /* Нот не пробелов! */
}
.col {
  display: inline-block;
  vertical-align: bottom;
  font-size: 16px; /* Возвращаем размер шрифта */
}

Переиспользуемые классы

Создайте кастомные универсальные классы для выравнивания, чтобы обогатить макет и сохранить принцип DRY.

display: table-cell

display: table-cell с vertical-align: bottom может оказаться полезным при выравнивании:

.table-cell-align {
  display: table-cell;
  vertical-align: bottom;
}

Этот в некоторой степени устаревший подход имитирует поведение таблицы и может быть менее гибким, чем flexbox.

Полезные материалы

1. Сетка · Bootstrap — детальное руководство по Bootstrap Grid.
2. Полное руководство по CSS Grid | CSS-Tricks — всё, что нужно знать о работе с CSS Grid.
3. Гриды в CSS – CSS: Каскадные таблицы стилей | MDN — надёжное руководство MDN по CSS Grid Layout.
4. Полное руководство по Flexbox | CSS-Tricks — ключ к решению задач выравнивания внутри сетки.
5. Сообщество DigitalOcean | DigitalOcean — отличные обучающие материалы и вопросы-ответы, которые помогут в решении связанных задач.