Объединение нескольких Navbar на мобильных устройствах с помощью Bootstrap 3

Question

Вот мой исходный код:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Navbar 1</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel placerat lacus. In at ipsum ex. Phasellus vitae molestie tortor. Praesent venenatis odio mi, quis ullamcorper felis lobortis vel. Donec sed ipsum interdum, ullamcorper mauris nec, blandit libero. Aenean lacinia ante aliquam ligula posuere hendrerit. Pellentesque tincidunt augue quis rhoncus accumsan. Pellentesque fermentum nisl a urna dictum placerat. Aenean iaculis id nisi sit amet pellentesque. In leo ligula, accumsan posuere pellentesque eu, egestas sit amet nunc. Duis id odio varius, volutpat nisi quis, bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. 

<div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Navbar 2</a></li> 
    </ul> 
</div> 

Есть ли способ объединить 2 Navbar на мобильный, но держать его разделяют на рабочем столе?

Answer 1

Попробуйте этот код. Я использовал медиа-запрос, чтобы показывать и скрывать сетки в зависимости от размера экрана. Пример http://www.bootply.com/N9cskeuHWl

<style> 
    @media screen and (max-width: 700px) { 
    .col-md-12{ 
    display:none; 
    } 
    } 
    @media screen and (min-width: 700px) { 
    .col-xs-12{ 
    display:none; 
    } 
    } 

    </style> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" 
    data-toggle="collapse" data-target=".bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <div class="col-md-12"> 
      <li><a href="#">Navbar 1</a></li> 
      </div> 
      <div class="col-xs-12"> 
       <li><a href="#">Navbar 1</a></li> 
        <li><a href="#">Navbar 2</a></li> 

      </div> 
     </ul> 
     </div> 
    </div> 
    </nav> 
     <p>You Content</p>                  
    <div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <div class="col-md-12"> 
    <li><a href="#">Navbar 2</a></li> 
    </div> 
    </ul> 
    </div> 

Answer 2

Для всех, кто сталкивается с этим. Вы можете легко достичь этого с помощью Bootstrap Responsive Utilities. https://getbootstrap.com/docs/3.3/css/#responsive-utilities

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Navbar 1</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right visible-xs-block"> 
       <li><a href="#">Navbar 2</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel placerat lacus. In at ipsum ex. Phasellus vitae molestie tortor. Praesent venenatis odio mi, quis ullamcorper felis lobortis vel. Donec sed ipsum interdum, ullamcorper mauris nec, blandit libero. Aenean lacinia ante aliquam ligula posuere hendrerit. Pellentesque tincidunt augue quis rhoncus accumsan. Pellentesque fermentum nisl a urna dictum placerat. Aenean iaculis id nisi sit amet pellentesque. In leo ligula, accumsan posuere pellentesque eu, egestas sit amet nunc. Duis id odio varius, volutpat nisi quis, bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. 

<div class="collapse navbar-collapse bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Navbar 2</a></li> 
    </ul> 
</div>