Эксперты,

Я пытаюсь перейти на bootstrap 4, и у меня проблемы с гибкими контейнерами.

По какой-то причине в моем меню навигации ссылки как подменю, так и главное меню не выровнены по правому краю. Однако, когда я полностью удаляю содержимое подменю, главное меню правильно выравнивается по правому краю.

Что мне здесь не хватает?

Заранее спасибо.

https://codepen.io/orthix/pen/ZobjMa

<nav class="header navbar navbar-expand-md navbar-light fixed-top bg-light">
  <div class="container">
    <div class="navbar-brand">
      Logo
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      Menu
    </button>
    <div class="collapse navbar-collapse flex-column align-items-end" id="navbarMenu">
      <div class="row">
        <ul class="col-12 navbar-nav navbar-submenu ml-auto order-last">
          <li class="nav-item">
            <a class="nav-item nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-item nav-link" href="#">Link</a>
          </li>
        </ul>
        <ul class="col-12 navbar-nav ml-auto order-xs-first order-md-last">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-sm btn-outline-secondary" href="#">button 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-sm btn-danger text-white" href="#">button 2</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
0
Rick 22 Апр 2018 в 21:55

1 ответ

Лучший ответ

Вам необходимо использовать служебный класс justify-content-end.

Вот рабочий код: https://codepen.io/anon/pen/rvOZBK

Дополнительные сведения о служебных классах flexbox для обоснования содержимого см. Здесь: https: // getbootstrap. com / docs / 4.1 / utilities / flex / # justify-content.

2
ashfaq.p 22 Апр 2018 в 19:12