Запрет раскрывающегося списка в свернутой панели навигации bootstrap4 от расширения панели навигации - PullRequest
Новая
       75

Запрет раскрывающегося списка в свернутой панели навигации bootstrap4 от расширения панели навигации

0 голосов
/ 18 мая 2018

Мне нужен селектор, который не падает вместе с остальным меню в навигационной панели начальной загрузки v4.У меня тоже что-то работает.См. Ниже.

Это немного странно, так как на самом деле есть два переключателя языка, но один скрыт, когда окно браузера меньше, чем точка lg-breakpoint в начальной загрузке.Обратно наоборот, если оно больше, чем точка останова lg.Это работает нормально, но может быть более элегантный способ сделать это.

Что мне не нравится, так это то, что, когда навигационная система падает, нажатие на селектор языка расширяет панель навигации на высоту выпадающего меню.список.Очевидно, что это связано с тем, что селектор языка обернут в свернутое «nav» - но я бы предпочел, чтобы он вел себя так же, как и с селектором lg и более широким - там выпадающий список выходит за пределы панели навигации без изменения размераnavbar.

Есть ли способ обойти это?

Смотрите эти изображения:

Language selector in expanded menu

Language selector in collapsed menu

Language selector dropdown list expands collapsed menu

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--navigation-->
<nav class="navbar sticky-top navbar-dark navbar-expand-lg">
  <a class="navbar-brand" href="#">Page Title</a>
  <!--language selector for collapsed menu [hidden when viewport larger than medium]-->
  <div class="d-lg-none ml-auto">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&#127760; Language</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Language 1</a>
          <a class="dropdown-item" href="#">Language 2</a>
          <a class="dropdown-item" href="#">Language 3</a>
        </div>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <div class="navbar-nav">
      <!-- page user is looking at = "nav-link active"-->
      <a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link 1</a>
      <a class="nav-item nav-link" href="#">Link 2</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Team</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Link</a>
          <a class="dropdown-item" href="#">Another Link</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">An entirely different link</a>
        </div>
      </div>
      <a class="nav-item nav-link" href="sponsor_us.php">Link 3</a>
      <a class="nav-item nav-link disabled" href="#">inactive Link</a>
    </div>
  </div>
  <!--language selector for expanded menu [hidden viewport size medium and down]-->
  <div class="d-none d-sm-none d-md-none d-lg-block d-xl-block ml-auto">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&#127760; Language</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Language 1</a>
          <a class="dropdown-item" href="#">Language 2</a>
          <a class="dropdown-item" href="#">Language 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Редактировать: Вот ссылка jsfiddle - хотя по некоторым причинам это не такне использовать файл bootstrap.css, который я добавил в ресурсы.Так что меню белое, а не черное :).Вы должны изменить ширину окна, в котором отображается HTML, чтобы увидеть, как меню разворачивается и разворачивается.

...