Bootstrap 4. Создание меню

Вышел Bootstrap 4. И вот интересная фишка с меню:

navbar-right

уже не работает. Появился новый класс

ml-auto

Если взять с сайта Bootstrap код меню, скажем вот этот и дописать к списку ul этот класс ml-auto, то меню выравняется по правому краю.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Но минус в том, что navbar-brand остается прижатым к левому краю без какого либо отступа, а само меню к правому краю без отступа. При изменении масштаба страницы navbar растягивается и сжимается. Когда добавляешь все это в div class="container", чтобы получить максимальную ширину в 1140px и выровнять navbar по центру (чтобы были отступы с обоих краев), то ml-auto перестает работать и navbar получается прижатым к левому краю container. Как решить эту проблему?

Bootstrap

Bootstrap 4

HTML

1 ответов

Проблема решена

<header>
      <div class="container-fluid">
        <div class="container">
          <nav role ="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            </ul>
            </div>
          </nav>
        </div>
  </div>
    </header>

все отлично работает