Субтитры в навигационной панели + выровненные по правому краю элементы

Question

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

Добавление субтитров к начальной загрузке Navbar

К сожалению, когда я добавил подзаголовок, я потерял выравнивание по правому краю на моей навигационной панели - это означает, что мне нужно, чтобы некоторые элементы были выровнены по правому краю, и они были, но не после того, как добавили подзаголовок.

Есть идеи, как можно объединить подзаголовок панели навигации с выравниванием по правому краю?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="d-flex flex-column">
    <div class="d-sm-flex d-block flex-nowrap">
      <div class="collapse navbar-collapse">
        <ul id="navbar-section-list" class="navbar-nav mr-auto">
          ... a bunch of li/a here to represent left aligned items
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item dropdown-item-right">
            <a id="refresh-button" class="nav-link" href="#">Refresh</a>
          </li>
          <li class="nav-item dropdown dropdown-item-right justify-content-end">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <span id="account-info-header" class="dropdown-item-text"></span>
              <a class="dropdown-item">Settings</a>
              <a class="dropdown-item" href="/auth/v1/logout">Log out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <small id="navbar-node-info"></small>
  </div>
</nav>

Я думаю , что выравнивание по правому краю «Обновить» и «Учетная запись» были предоставлены атрибутом «mr-auto» в:

<ul id="navbar-section-list" class="navbar-nav mr-auto">

Но, к сожалению, я понятия не имею, почему он перестал работать с "flex" ...

Я попытался добавить justify-content-end на второй ul.navbar-nav, но это не имело никакого значения, все еще нет правого выравнивания.

Answer 1

вот jsfiddle для вашей проблемы https://codepen.io/irinnahar/pen/JQamQy?editors=1000 вам просто нужно добавить w-100 к вашему <div class="d-flex flex-column w-100"> классу

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="d-flex flex-column w-100">
    <div class="d-md-flex d-block flex-nowrap">
      <div class="collapse navbar-collapse">
        <ul id="navbar-section-list" class="navbar-nav mr-auto">
          ... a bunch of li/a here to represent left aligned items
        </ul>
        <ul class="navbar-nav ">
          <li class="nav-item dropdown-item-right">
            <a id="refresh-button" class="nav-link" href="#">Refresh</a>
          </li>
          <li class="nav-item dropdown dropdown-item-right justify-content-end">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <span id="account-info-header" class="dropdown-item-text"></span>
              <a class="dropdown-item">Settings</a>
              <a class="dropdown-item" href="/auth/v1/logout">Log out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <small id="navbar-node-info"></small>
  </div>
</nav>