Bootstrap 5 Контейнеры панели навигации

Макет контейнера может определять основной фрейм страницы с использованием компонентов заголовка, содержимого, боковой панели и нижнего колонтитула. Мы также можем добавить панель навигации в верхней части веб-страницы, используя компонент панели навигации контейнера. Это не так важно, но вы можете обернуть панель навигации в контейнер, чтобы центрировать ее на странице, но в этом случае требуется внутренний контейнер. Но если вы добавите класс контейнера внутри панели навигации, он будет центрировать содержимое фиксированной/статической верхней панели навигации.

Классы контейнеров Navbar:

• container: этот класс используется для создания адаптивного контейнера с фиксированной шириной.
• container-md: этот класс используется для установки средней ширины контейнера.
• container-fluid: класс container-fluid предоставляет полноразмерный контейнер, который охватывает всю ширину области просмотра.

Синтаксис:

<div class="container">
  <nav class="...">
    <div class="container-fluid">
      <a class="..." href="#">...</a>
    </div>
  </nav>
</div>

Ниже приведены примеры, иллюстрирующие контейнеры Bootstrap 5 Navbar:

Пример 1. В этом примере мы будем использовать класс container-fluid с внешним контейнером и без него.

Выход:

Пример 2. В этом примере мы будем использовать класс container-fluid с внешним контейнером и без него.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/navbar/#containers