Загрузочный лоток: поиск видимый, когда navbar рухнул

Question

Я хочу, чтобы моя панель поиска была видна, когда navbar рушится.

Мой код: http://jsfiddle.net/edalzell/a3yng825/1/ работает при свертывании, но при расширении отображается две строки поиска.

HTML:

<header class= "blog-masthead"> 
    <nav class="navbar" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get"> 
        <div class="form-group input-group"> 
         <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query"> 
         <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> 
        </div> 
       </form> 
      </div> <!-- navbar-header --> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><a href="/blog">Blog</a></li> 
        <li><a href="/about">About</a></li> 

       </ul> 
      <form class="navbar-form navbar-right" role="search" action="/search" method="get"> 
       <div class="form-group input-group"> 
        <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query"> 
        <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> 
       </div> 
      </form> 
      </div> <!-- navbar-collapse --> 
     </div> 
    </nav> 
</header> 

Answer 1

Это потому, что у вас есть две панели поиска объявили, у вас есть несколько вариантов, чтобы получить желаемый результат

1. Снимите дополнительный SearchBar что вы заявили об отказе раздел

2. Скрыть/показать конкретные пункты нужного разрешения, вы можете проверить this SO thread

Я использовал первый способ, вы можете найти jsfiddle here

Полный код:

<header class= "blog-masthead"> 
    <nav class="navbar" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get"> 
        <div class="form-group input-group"> 
         <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query"> 
         <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> 
        </div> 
       </form> 
      </div> <!-- navbar-header --> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><a href="/blog">Blog</a></li> 
        <li><a href="/about">About</a></li> 

       </ul> 

      </div> <!-- navbar-collapse --> 
     </div> 
    </nav> 
</header>