在bootstrap中搜索栏

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 CODE：

<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的输入组类并将你的按钮放在其中。