Чтобы разместить кнопку "ЗАПИСАТЬСЯ" по центру в мобильной версии Navbar в Bootstrap 4.5, вам потребуется некоторые изменения в стандартной структуре Navbar.
1. Измените структуру Navbar, чтобы добавить контейнер для кнопок. Например:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Мой сайт</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!-- здесь можно разместить другие пункты меню -->
</ul>
<div class="navbar-buttons d-flex justify-content-center">
<a class="btn btn-outline-primary" href="#">ЗАПИСАТЬСЯ</a>
</div>
</div>
</nav>
2. Добавьте собственные стили для класса .navbar-buttons, чтобы выполнить центрирование. В Bootstrap 4.5 появился класс d-flex для создания флекс-контейнера и класс justify-content-center для выравнивания элементов по центру. Вы можете использовать эти классы для создания центрированного контейнера для кнопки:
.navbar-buttons {
display: flex;
justify-content: center;
}
3. Опционально: если вы хотите изменить отображение кнопки на разных размерах экрана, вы также можете использовать классы Bootstrap, такие как d-none, d-sm-block, d-md-none, чтобы скрыть или показать кнопку на определенном размере экрана. Например, чтобы скрыть кнопку на экранах размером md и больше:
<div class="navbar-buttons d-flex justify-content-center d-md-none"> <a class="btn btn-outline-primary" href="#">ЗАПИСАТЬСЯ</a> </div>
Теперь ваша кнопка "ЗАПИСАТЬСЯ" будет размещена по центру Navbar в мобильной версии вашего сайта, а на больших экранах она будет отображаться либо справа от пунктов меню, либо скрыта в зависимости от использованных классов.