Как центрировать кнопку "ЗАПИСАТЬСЯ" в Navbar в мобильной версии с использованием Bootstrap 4.5?

Как изменить порядок разделов меню навигации в мобильной версии сайта?
  • 29 сентября 2023 г. 22:07
Ответы на вопрос 6
Чтобы центрировать кнопку "ЗАПИСАТЬСЯ" в Navbar в мобильной версии с использованием Bootstrap 4.5, вы можете использовать классы "mx-auto" и "text-center". Вот пример кода:

```html
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Ваш логотип</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Раздел 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Раздел 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Раздел 3</a>
      </li>
    </ul>
    <a class="btn btn-primary mx-auto mt-2 mt-md-0" href="#">ЗАПИСАТЬСЯ</a>
  </div>
</nav>
```

Чтобы изменить порядок разделов меню навигации в мобильной версии сайта, вы можете использовать классы "flex-column" и "order-X", где X - это число определяющее порядок элемента. Чем меньше число, тем раньше элемент будет расположен на странице. Вот пример кода:

```html
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Ваш логотип</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav flex-column">
      <li class="nav-item">
        <a class="nav-link order-1" href="#">Раздел 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link order-2" href="#">Раздел 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link order-3" href="#">Раздел 3</a>
      </li>
    </ul>
    <a class="btn btn-primary mx-auto mt-2 mt-md-0 order-0" href="#">ЗАПИСАТЬСЯ</a>
  </div>
</nav>
```

В этом примере, кнопка "ЗАПИСАТЬСЯ" будет отображаться перед разделами меню навигации на мобильной версии сайта.
 
 Это ссылка на логотип сайта.
 
 Это кнопка для открытия/закрытия навигационного меню.
 
 Это кнопка для открытия модального окна с формой для записи
 Здесь находятся ссылки на разделы сайта.
 
Похожие вопросы