создание двухрядного навигационного меню Bootstrap 4 - PullRequest
Новая
       20

создание двухрядного навигационного меню Bootstrap 4

0 голосов
/ 23 марта 2019

Я пытаюсь создать собственную навигацию, которая, как я обнаружил, больше нигде не дублировалась в Интернете.Я искал верхнее и нижнее значения для некоторого примера решения, но безрезультатно, поэтому надеялся, что кто-нибудь может помочь мне в достижении этой цели в Bootstrap 4. Здесь.

На прилагаемом изображении показано, как я пытаюсь воссоздать вBootstrap, однако его применение сложнее применить.

Это двухрядная панель навигации на рабочем столе.

  • top nav имеет ссылки на крайний левый и крайний правый
  • В нижней навигационной панели есть поиск в крайнем левом углу, бренд в центре и выпадающий список аватаров пользователя в крайнем правом положении.
  • когда навигационная панель рушится в мобильном телефоне, она должна отображать только гамбургерзначок в крайнем левом углу, бренд в центре и значок поиска в крайнем правом углу, который приведет к сбою в поиске (вторая проблема, над которой я буду работать позже).
  • когдапри нажатии на гамбургер сначала должен отображаться выпадающий список аватаров, а затем перечисляться следующие элементы навигации с верхней панели навигации.

Дело в том, что для того, чтобы иметь две панели навигации, необходимо иметь два столбца.промахи.Я попытался использовать один navbar с двумя navbar-nav внутри него (что показывает мой фрагмент), но расположение их в соответствии с моим изображением не работает.

Прикрепленный фрагмент моего кода не так хорош, так как яЯ не совсем понимаю, как использовать в нем flexbox, но, как видите, ничего не работает правильно.

enter image description here Ссылка на мой кодовый блок: https://codepen.io/krystyna93/pen/PLyMPr?editors=1100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<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.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="navbar navbar-light bg-light navbar-expand-md">

  <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>
  <a class="navbar-brand" href="#">Logo/Brand</a>

  <div id="navbar" class="navbar-collapse collapse flex-column w-100">
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>
  </div>
  <!--/.nav-collapse -->
</div>

Должен быть способ сделать это, но я немного борюсь с этим и продолжаю бить кирпичную стену каждый раз, когда подхожу.

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

Любая помощь будет высоко оценена.Спасибо

1 Ответ

1 голос
/ 23 марта 2019

Полагаю, вы можете узнать остальное отсюда.По сути, ваш первый ряд ссылок, кнопки свертывания, логотип, окно поиска, выпадающий список пользователей должны находиться непосредственно под панелью навигации.Навбар должен быть рядным и завернутым.С тех пор, это в основном просто перестановка порядка.

<div class="navbar navbar-light bg-light navbar-expand-md flex-row flex-wrap">
    <a class="navbar-brand flex-grow-1 justify-content-center order-sm-2 order-3 order-md-3" href="#" >Logo/Brand</a>
    <button class="navbar-toggler order-1 order-xs-1 order-md-4" 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>

  <button class="navbar-toggler order-3 order-xs-3 order-md-5" type="button" data-toggle="collapse" data-target="#search" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div id="navbar" class="navbar-collapse collapse flex-row w-100 order-5 order-sm-5 order-md-1">
    <ul class="navbar-nav justify-content-start flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav justify-content-end flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>

  </div><!--/.nav-collapse -->
  <div id="search" class="navbar-collapse collapse flex-row order-sm-4 order-4 order-md-2 ">
      <input type="text" />
      <button >Search</button>
    </div>




</div>

https://codepen.io/anon/pen/movbMy?editors=1000

...