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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
.center-tabs {
  display: flex;
  justify-content: center;
}

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

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

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

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

CSS
Скопировать код
.center-tabs-inline {
  text-align: center;
}
.nav-tabs > li {
  float: none;
  display: inline-block;
}

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

HTML
Скопировать код
<div class="center-tabs-inline">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

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

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

CSS
Скопировать код
.center-tabs-ie7 {
  text-align: center;
  *zoom: 1;
}

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

HTML
Скопировать код
<div class="center-tabs-ie7">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

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

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

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

HTML
Скопировать код
<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <ul class="nav nav-tabs">
      <!-- ... -->
    </ul>
  </div>
</div>

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

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

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

CSS
Скопировать код
.center-tabs-margin {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

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

HTML
Скопировать код
<div class="center-tabs-margin">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

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

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

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

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

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

CSS
Скопировать код
@media (max-width: 768px) {
  .nav-tabs > li {
    float: none;
    display: inline-block;
  }
}

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

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

HTML
Скопировать код
<div class="d-flex justify-content-center">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

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

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

HTML
Скопировать код
<ul class="nav nav-tabs nav-justified">
  <!-- ... -->
</ul>

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

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

Markdown
Скопировать код
До:         🧒 👧 👦
          ⚖️
        -----------------

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

CSS
Скопировать код
.nav-tabs {
  display: flex;
  justify-content: center;
}

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

Markdown
Скопировать код
После:      🧒 👧 👦
          ⚖️
        -----------------

Таким образом, благодаря 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.