Bootstrap 3.0.2 - Как сохранить 2 сбрасываемых navbars, но показывая один из них только при свертывании

Question

Мне уже удалось создать 2 сворачиваемых navbars, отлично работающих на Bootstrap 3.0.2 - оба наббара сворачиваются до 2 хороших кнопок, которые позволяют получить доступ к каждому navbar изолированно.

Суть в том, что теперь мне нужно сохранить один из наббаров, спрятанных на -sm, -md и -lg, и отображаться только на -xs.

Самый простой способ - установить «скрытый-sm, скрытый-md, скрытый-lg» на навигационной панели (что действительно работает), но мы получаем побочный эффект «показ свернутого меню» всякий раз, когда я переключаюсь на -xs (из-за настройки hiddens) - есть ли способ избежать расширения меню на -xs или другого способа скрыть навигационную панель на -sm, -md и -lg?

Спасибо!

Answer 1

я бы сказал, просто использовать .visible-xs:

<nav class="navbar navbar-inverse visible-xs" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" 
      data-toggle="collapse" 
      data-target="#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> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1">...</div> 
</nav> 

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" 
      data-toggle="collapse" 
      data-target="#navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-collapse-2">...</div> 
</nav> 

Bootply