Twitter bootstrap links in mobile nav

Question

Возможно ли показать некоторые ссылки помимо бренда и кнопки переключения в мобильной версии навигатора? Моя navigatin выглядит следующим образом:

<nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" 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> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#" style="cursor:default;"><%= __('chart.from') %></a></li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy"> 
      </div> 
      </form> 
      <ul class="nav navbar-nav"> 
      <li><a href="#" style="cursor:default;"><%= __('chart.to') %></a></li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy"> 
      </div> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a id="chart_btn" href="#chart" data-toggle="tab"><%= __('chart.graph') %></a></li> 
      <li><a id="table_btn" href="#table" data-toggle="tab"><%= __('chart.table') %></a></li> 
      </ul> 
     </div> 
     </nav> 

Я бы хотел, чтобы последние два элемента, видимые в мобильной версии.

Answer 1

Вы можете использовать navbar-link класс внутри nav-header, так что ссылки не разрушаться в мобильном меню ..

<nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header pull-right"> 
      <p class="navbar-text"> 
      <a id="chart_btn" href="#chart" data-toggle="tab" class="navbar-link">graph</a> 
      <a id="table_btn" href="#table" data-toggle="tab" class="navbar-link">table</a> 
      &nbsp; 
      </p> 
      <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> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#" style="cursor:default;">from</a></li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy"> 
      </div> 
      </form> 
      <ul class="nav navbar-nav"> 
      <li><a href="#" style="cursor:default;">to</a></li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy"> 
      </div> 
      </form> 
     </div> 
</nav> 

Bootply

Answer 2

Что находится внутри класса коллапса, рухнуло. Если вам нужна пара ссылок, и они достаточно короткие, за пределами краха, но внутри бара рядом с брендом поместите их после бренда, но перед разворотом div и соответствующим образом настройте их.