html - 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

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