Как предотвратить перенос элемента навигационной панели "BUTTON LINK"? - PullRequest
Новая
       14

Как предотвратить перенос элемента навигационной панели "BUTTON LINK"?

0 голосов
/ 08 апреля 2020

На следующей панели навигации у меня возникла проблема на экранах меньшего размера: «КНОПКА КНОПКИ» находится под переключателем BRAND NAME. Как я могу предотвратить это поведение?

Это полный HTML код:

bmenu test 

  <nav class="navbar navbar-expand-md fixed-top navbar-dark" style="background-color: #e88b17;">
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link" href="#">NavItem1</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">NavItem2</a>
              </li>
              <li class="nav-item active">
                  <a class="nav-link" href="#">NavItem3</a>
              </li>
          </ul>
      </div>

      <div class="mx-auto order-0 mb-0 h3 pl-5 pr-5">
          <a class="navbar-brand mx-auto" href="{{ url('/hmenu') }}">BRAND NAME</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
              <span class="navbar-toggler-icon"></span>
          </button>
      </div>

      <button type="button" class="btn d-md-none btn-dark nav-link text-nowrap">BUTTON LINK</button>

      <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">NavItem4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">NavItem5</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">NavItem6</a>
            </li>

            <li class="nav-item">
               <button type="button" class="btn btn-dark nav-link text-nowrap">BUTTON LINK</button>
            </li>
          </ul>
      </div>

  </nav>

Выход:

enter image description here

Вот как я хотел бы выглядеть:

enter image description here

1 Ответ

0 голосов
/ 08 апреля 2020

Требуется больше места, чтобы вместить все на небольших устройствах.
Таким образом, вы можете удалить отступы из бренда для мобильных устройств.

Вместо pl-5 pr-5 используйте px-sm-5. 

<div class="mx-auto order-0 mb-0 h3 px-sm-5">
...