Центрирование пагинации в Bootstrap: решение проблемы с CSS

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

Для осуществления центрирования пагинации в Bootstrap используйте класс .justify-content-center, который следует применить к родительскому контейнеру:

<nav aria-label="Navigation">
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
  </ul>
</nav>

Утилитный класс .justify-content-center, применяемый в контексте flexbox, обеспечивает центрирование элементов без необходимости использования дополнительных обёрток или кастомных CSS-стилей.

Центрирование в различных версиях Bootstrap

Важно точно понимать способы центрирования, применимые в разных версиях Bootstrap, чтобы определить подходящий вариант для вашего проекта.

Центрирование в Bootstrap 4

В Bootstrap 4 использование flexbox значительно упрощает процесс центрирования. Контейнер превращается в flex-контейнер при помощи класса .d-flex, а затем применяется .justify-content-center.

<nav class="d-flex justify-content-center">
  <ul class="pagination">
    <!-- Элементы пагинации -->
  </ul>
</nav>

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

Центрирование в Bootstrap 3

В Bootstrap 3, где нет возможностей flexbox, следует применять класс .text-center для центрирования содержимого.

<div class="text-center">
  <ul class="pagination">
    <!-- Элементы пагинации -->
  </ul>
</div>

Центрирование в Bootstrap 2 и более ранних версиях

Для устаревших версий Bootstrap, предшествующих третьей, потребуется создание собственных CSS-стилей.

.pagination {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

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

Допустим, вам нужно расположить группу воздушных шариков в центре комнаты. То же касается и пагинации — мы хотим расположить её точно по центру контейнера.

<div class="room">
  <div class="balloons">
    🎈🎈🎈
  </div>
</div>

Если .balloons эквивалентен .pagination, а room — вашему контейнеру, вот код для достижения центрирования:

.room {
  display: flex;
  justify-content: center;
}

Тогда воздушные шарики (пагинация) будут красиво парить прямо в центре:

🎈🎈🎈
    ↑
Мы их центрировали!

Адаптивное центрирование

Адаптивный дизайн важен и в Bootstrap 4 есть специальный класс .text-xs-center для малых устройств. В новых версиях выбор делается в пользу универсальных классов, например, .text-center, эффективно работающего на всех брейкпоинтах.

Устранение проблем с центрированием

Сложности с центрированием могут возникнуть по различным причинам:

• Конфликтующие CSS-стили: Убедитесь, что ваши стили не переопределяют классы Bootstrap.
• Некорректная разметка: Обязательно следите за тем, чтобы используемые контейнеры соответствовали выбранной вами версии Bootstrap.
• Отсутствие файлов: Проверьте наличие всех необходимых CSS- и JS- файлов Bootstrap для корректной работы пагинации.

Если вы работаете с Laravel и используете шаблоны Blade в связке с Bootstrap для пагинации:

{{ $products->links("pagination::bootstrap-4") }}

Решение проблем с центрированием

Если центрирование не работает как предполагалось:

• Проверяйте версии: Разберитесь, соответствуют ли применяемые классы Bootstrap вашей версии.
• Валидатор разметки: Воспользуйтесь W3C Markup Validation Service.
• Инструменты разработчика: Анализируйте элементы пагинации в инспекторе, чтобы изучить применяемые стили.

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

1. Pagination · Bootstrap — официальная документация по реализации пагинации в Bootstrap.
2. Centering in CSS: A Complete Guide | CSS-Tricks — всестороннее руководство по центрированию элементов при помощи CSS.
3. Основы flexbox – CSS | MDN — детальный обзор flexbox, ключевого инструмента для центрирования элементов.
4. Bootstrap Pagination — учебник, охватывающий дополнительные аспекты пагинации Bootstrap.
5. Наглядное руководство по свойствам flexbox в CSS3 | DigitalOcean — руководство, визуально изображающее свойства flexbox, полезное для понимания центрирования в Bootstrap.