Бутстрап 4 Навбар

Question

Как создать пробел между логотипом навигационной панели Bootstrap 4 и элементами списка навигационной панели?

Я хочу navbar-brand (логотип) на самой левой стороне и navbar-list-items на самой правой стороне в контейнере.

Вот и все.

Answer 1

Вы можете использовать тот же шаблон для компонента из официальных документов и просто добавить класс ml-auto в контейнер списка, чтобы он выровнял все по правому краю.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto"> <!-- Add this class to the list container -->
      <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

Я обнаружил, что следующее работает для меня.

1. Добавить 'container-liquid' или 'container'

<ul class="navbar-nav container-fluid">
...

Добавьте 'ml-auto' к элементам навигации, которые вы хотите выровнять по правому краю

<li class='nav-item ml-auto'><a href="#">Item</a></li>