Как выровнять навигационную панель Bootstrap по правому краю: методы и примеры - Fcodenotes

Чтобы выровнять панель навигации Bootstrap по правому краю, вы можете использовать следующие методы:

Использование класса «ml-auto». Добавьте класс «ml-auto» к элементу «navbar-nav» на панели навигации. Это переместит элементы панели навигации вправо.

<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
</ul>

Использование утилит Flexbox: примените класс justify-content-end к элементу navbar. Это позволит выровнять элементы панели навигации по правой стороне.

<nav class="navbar justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>
</nav>

Использование класса Bootstrap “navbar-right” (Bootstrap 3). Если вы используете Bootstrap 3, вы можете добавить класс “navbar-right” к элементу “navbar-nav”.

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>

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