Отзывчивое меню Bootstrap неправильно расширяется - PullRequest
Новая
       47

Отзывчивое меню Bootstrap неправильно расширяется

0 голосов
/ 25 сентября 2019

Я немного изменил адаптивное меню Bootstrap, и результаты не совсем то, что я хотел.Я пытался сделать так, чтобы все меню отображалось в одной строке, и в контейнере размером 1140 пикселей больше элементов меню, чем можно отобразить, поэтому я немного расширил контейнер.При изменении размера браузера я ломаюсь в 1260px.Меню скрыто, и значок гамбургера в раскрывающемся меню мобильного устройства отображается, как и ожидалось, но если я щелкну по гамбургеру, меню будет отображаться встроенным, а не расширением мобильного меню.По крайней мере, пока я не достигну точки останова 992px.Если я удаляю правила Bootstrap для точки останова 992px, меню не отображается неправильно при щелчке на значке бургера, но также не отображается нормально.Я не уверен, как именно это исправить.Ниже приведена ссылка на jsFiddle, демонстрирующую проблему.Когда значок бургера впервые отображается при изменении размера браузера, щелчок по нему покажет проблему.Дальше сужаем окно, и оно работает как положено.

.container {
  max-width: 90%;
  width: 90%;
}

@media (max-width: 1260px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggler {
    display: block!important;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .collapse:not(.show) {
    display: none!important;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <div class="container horizontal-padding-0">

    <a href="#" class="navbar-brand mb-3">
      <h2>TITLE</h2>
    </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 id="navbarNav" class="collapse navbar-collapse">

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a href="#" class="menu-links">AAAA</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">BBBBBBBBB BBBBBBBB</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">CCCCCCCCCC</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">DDDDDDD</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">EE EEEEE</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">FFFFFFF</a>
        </li>
        <li class="nav-item">
          <a href="#" class="menu-links">GGGGG</a>
        </li>
      </ul>

    </div>

  </div>

</nav>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

jsFiddle

1 Ответ

0 голосов
/ 26 сентября 2019

ОК, это было довольно просто.Мне просто нужно было изменить значение переменной точки останова "xl" в _variables.scss с 1200px на нужную мне ширину.

...