Строка поиска в загрузчике

Question

Я пытаюсь сделать поиск-бар, который выглядит как:

Но следующий HTML фрагмент дает Поисково-бар, который выглядит примерно так:

<nav class="navbar navbar-default navbar-inverse"> 

    <form class="navbar-form navbar-right" role="search"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button> 
    </form> 

</nav> 

Как я могу сделать размер строки поиска такой же, как у кнопки?

Answer 1

HTML КОД:

<div class="container"> 
    <div class="row">  
     <div class="col-xs-8 col-xs-offset-2"> 
      <div class="input-group"> 
       <input type="text" class="form-control" name="x" placeholder="Search term..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 

Любая проблема Смотрите этот учебник http://bootsnipp.com/snippets/featured/search-panel-with-filters

Answer 2

<nav class="navbar navbar-default navbar-inverse"> 
    <form class="navbar-form navbar-right" role="search"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button> 
     </span> 
    </div> 
    </form> 
</nav> 

Вы должны использовать класс входной группы Bootstrap и поставить кнопку надлежащим образом внутри него.