Чтобы сдвинуть всю панель навигации вправо
, добавьте margin-left: auto к css для вашего элемента navbar-nav. Вы можете сделать это разными способами, например, присвоив элементу идентификатор или собственное имя класса и стилизовав их в файле css. Самый простой способ проверить это встроенным стилем, например:
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container">
<ul class="navbar-nav" style="margin-left: auto;">
...
</ul>
</div>
</div>
Чтобы изменить только номер телефона
Чтобы сделать это, нам нужно сделать navbar-nav элемент, который содержит все ссылки, достаточно большой, чтобы разместить ссылки, которые он содержит. В вашей текущей реализации элемент navbar-nav имеет тот же размер, что и его содержимое, поэтому, естественно, ссылки находятся рядом друг с другом. Чтобы сделать это, мы сделаем элемент navbar-nav такой же ширины, как и его окружающий контейнер, стилизовав его с помощью width: 100%. Теперь, когда в элементе navbar-nav есть свободное место для разметки ссылок, мы можем заставить телефонный номер сместиться вправо, присвоив ему margin-left: auto, который заполняет открытое пространство левым полем телефонного номера. элемент.
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container">
<ul class="navbar-nav" style="width: 100%;">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item" style="margin-left: auto;">
<a class="nav-link head-phone ml-auto justify-content: right" href="#"><i class="fas fa-phone-alt"></i> 888-218-0324</a>
</li>
</ul>
</div>
</div>