Bootstrap 3 - Отзывчивый navbar, как исключить некоторые элементы из рутинга

Question

Я новичок в Bootstrap, поэтому у меня возникают трудности с отзывчивым навигатором. Это то, что я хочу посмотреть: Бренд - панель поиска - сообщения/уведомления - пустое пространство - ссылки на правой стороне

Все должно разрушаться на небольших устройствах, кроме марки и сообщений/уведомлений.

Это то, что я пробовал: http://www.bootply.com/HqordmjhNT

На предыдущей SearchBar связи должны прийти до сообщений/уведомлений, но то, что я когда-либо пытался сделать, Searchbar не разрушается.

Может кто-нибудь помочь мне с этим?

Answer 1

Вы можете удалить ссылки из отзывчивой разрушающейся навигационной панели путем добавления пользовательских стилей, вот моя ручка http://www.bootply.com/LdOCkcUulF#

/* CSS used here will be applied after bootstrap.css */ 
.navlink { 
    float: left; 
    height: 50px; 
    padding: 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

<div class="container"> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <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> 
      <a class="navbar-brand" href="#">Brand</a> 

      <a class="navlink" href="#">Messages <span class="sr-only">(current)</span></a> 
      <a class="navlink" href="#">Notifications</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

      <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
        <input class="form-control" placeholder="Search" type="text"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 2

Конечно просто добавить форму после того, как бренд

http://www.bootply.com/3R7nL9D87h 

/* CSS used here will be applied after bootstrap.css */ 
.navlink { 
    float: left; 
    height: 50px; 
    padding: 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

<div class="container"> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <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> 
     <a class="navbar-brand" href="#">Brand</a> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input class="form-control" placeholder="Search" type="text"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 

     <a class="navlink" href="#">Messages <span class="sr-only">(current)</span></a> 
     <a class="navlink" href="#">Notifications</a> 


    </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 navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 


</div>