Блог

Главная - Вопросы по программированию - Управление переносом на адаптивной панели навигации Bootstrap 4

Управление переносом на адаптивной панели навигации Bootstrap 4

#bootstrap-4 #responsive

#bootstrap-4 #отзывчивый

Вопрос:

У меня есть панель навигации BS4, которая почти работает так, как я хочу, но не совсем.

Слева у меня есть название панели навигации, а справа — четыре ссылки.

Панель навигации со ссылками

В определенной точке останова ссылки исчезают и заменяются кнопкой гамбургера.

Панель навигации с гамбургером

Если вы нажмете на гамбургер, ссылки появятся под ним.

Гамбургер с расширенными ссылками

Это все, чего я хочу.

Однако, если вы еще больше уменьшите ширину окна, панель навигации переместится, и под логотипом появится гамбургер.

Неуместный гамбургер

Этого я не хочу. Я хочу, чтобы гамбургер оставался там, где он есть, а логотип уменьшался в размерах (img-fluid).

Я могу добиться этого, добавив класс flex-nowrap к основному элементу панели навигации. Но тогда это вызывает другую проблему: когда вы нажимаете на гамбургер, ссылки появляются справа от него, а не внизу.

Неуместные ссылки

Есть ли способ остановить перенос гамбургера, при этом ссылки будут появляться под ним при нажатии на него?

Код ниже:

 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" class="img-fluid" style="max-height: 4rem" alt="Logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="toggleMenu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 4</a>
      </li>
    </ul>
  </div>
</nav>

Ответ №1:

Вы можете добиться этого, установив минимальную ширину панели навигации и максимальную ширину для бренда панели навигации.

 .navbar{
  min-width: 255px;
}
.navbar-brand {
  max-width: 65%;
} 
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" class="img-fluid" style="max-height: 4rem" alt="Logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="toggleMenu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 4</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>