Центрирование вкладок Bootstrap на странице: варианты CSS

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

Для центрирования вкладок Bootstrap используйте возможности CSS и flexbox. Добавьте следующий код CSS:

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

Затем оберните элемент nav-tabs в элемент с классом center-tabs:

<div class="center-tabs">
  <ul class="nav nav-tabs">
    <!-- Ваши вкладки будут расположены здесь -->
  </ul>
</div>

Таким образом, ваши вкладки будут равноправно отцентрованы на странице.

Различные способы центрирования: возможности выбора

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

Вариант 1: text-align и inline-block — проверенные временем методы!

Если вы предпочитаете обходиться без flexbox, то комбинация text-align с display: inline-block может стать надежной поддержкой.

.center-tabs-inline {
  text-align: center;
}
.nav-tabs > li {
  float: none;
  display: inline-block;
}

Добавьте к своему HTML класс center-tabs-inline, и центрирование произойдет без использования flexbox:

<div class="center-tabs-inline">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

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

Вариант 2: Совместимость с IE7 — потому что мы учитываем все нюансы!

Для браузера Internet Explorer 7 используйте следующий CSS, учитывающий особенности этого браузера:

.center-tabs-ie7 {
  text-align: center;
  *zoom: 1;
}

Не забудьте добавить класс center-tabs-ie7 в HTML-разметку:

<div class="center-tabs-ie7">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

Таким образом, ваши вкладки будут отцентрованы и в IE7.

Вариант 3: Используйте сетку Bootstrap!

Используйте следующую разметку для центрирования с помощью сетки Bootstrap в режиме адаптивности:

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <ul class="nav nav-tabs">
      <!-- ... -->
    </ul>
  </div>
</div>

Это позволит вам использовать стандартные классы Bootstrap для адаптивного центрирования.

Вариант 4: Примените магию свойства margin!

Часто для точного центрирования достаточно настроить отступы:

.center-tabs-margin {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

Добавьте к HTML-разметке класс center-tabs-margin:

<div class="center-tabs-margin">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

И ваши вкладки превосходно отцентрованы.

Адаптивное центрирование: советы от профессионала

Для адаптивного центрирования элементов воспользуйтесь следующими рекомендациями.

Медиа-запросы

Медиа-запросы помогут настроить стили для различных размеров экрана.

@media (max-width: 768px) {
  .nav-tabs > li {
    float: none;
    display: inline-block;
  }
}

Воспользуйтесь встроенными утилитами Bootstrap для работы с flex

Классы d-flex и justify-content-center позволят вам легко центрировать элементы.

<div class="d-flex justify-content-center">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

Магия с помощью класса "nav-justified"

Класс .nav-justified позволяет равномерно распределить вкладки и центрировать их.

<ul class="nav nav-tabs nav-justified">
  <!-- ... -->
</ul>

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

Представим центрирование как балансировку качель при помощи эмодзи.

До:         🧒 👧 👦
          ⚖️
        -----------------

Используя flexbox для центрирования вкладок Bootstrap, достигнем равновесие:

.nav-tabs {
  display: flex;
  justify-content: center;
}

И теперь вкладки отцентрованы:

После:      🧒 👧 👦
          ⚖️
        -----------------

Таким образом, благодаря flexbox достигается гармония, как и в случае с качелями.

Проблемы на пути: потенциальные сложности

Иногда могут возникнуть трудности с отображением вкладок, но есть способы их решения:

Выход вкладок за границы контейнера

Если вкладки выходят за границы контейнера, попробуйте использовать класс .nav-justified или индивидуально отрегулируйте CSS для настройки их размеров.

Нежелательное перемещение вкладок

Чтобы избежать смещений вкладок, установите их единообразную высоту или фиксированную компоновку.

Вкладки не центруются на определенных экранах

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

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

1. Spacing · Bootstrap — утилиты Bootstrap для работы с выравниванием.
2. Полное руководство по Flexbox — всё, что нужно знать о flexbox.
3. justify-content – CSS: Cascading Style Sheets — подробно о свойстве justify-content.
4. css – Как изменить цвет навигационной панели в Twitter Bootstrap – Stack Overflow — подробно о настройке цветов навигационных компонентов Bootstrap.
5. Navs · Bootstrap — официальная документация по вкладкам Bootstrap.
6. Flex · Bootstrap — классы Bootstrap для работы с flex.