Перемещение переключателя navbar в заголовок при падении в Bootstrap 4 - PullRequest
Новая
       24

Перемещение переключателя navbar в заголовок при падении в Bootstrap 4

0 голосов
/ 10 февраля 2019

Я новичок в Bootstrap и в целом в кодировании, и у меня возник вопрос по поводу свернутого переключателя navbar.На экранах sm и xs я хочу, чтобы кнопка переключения располагалась под значком поиска в заголовке, чтобы логотип находился слева, а значки - справа.

Единственный способ, которым я могу придумать, это переместить панель навигации в ту же строку, что и элементы заголовка, но когда я это сделал, панель навигации находилась внутри контейнера значков поиска, а не помещалась под ним.в своем собственном див.Есть ли способ сложить div navbar под значком поиска div, сохраняя их в отдельных div?

Вот что у меня сейчас есть в Code Pen: https://codepen.io/SuperCrunchy/pen/ZwxvYr. Пожалуйста, извините за несуществующий социальныйзначки на экранах большего размера! 

<header>
  <div class="container-fluid">
  <div class="container" id="header-container">
    <div class="row">
      <div class="col-9 col-md-6 d-flex justify-content-md-center align-items-start">
        <img src="http://www.laingsuk.com/blog/wp-content/uploads/2014/06/DIAMOND.jpg" class="col-10 col-sm-7 col-md-10 col-lg-7 p-0 pr-md-2 pl-md-2">
      </div>
      <div class="col-3 d-flex align-items-start justify-content-end">
    <div class="search-container">
      <span class="icon pr-md-2"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." class="search-container">
      </div>
    </div>
   </div>
<nav class="navbar navbar-expand-md navbar-light bg-light d-flex justify-content-end">
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>

Главная (актуальные) Серьги Подвески Мужские украшения Религиозные украшения Быстрые магазины

...