Html 引导中的搜索栏

我正在尝试创建一个如下所示的搜索栏：

但下面的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>

---

如何使搜索栏的大小与按钮的大小相同？

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>

任何问题请参阅本教程

---

您需要使用Bootstrap的输入组类，并将按钮适当地放入其中。

只需从

nav

类中删除

navbar inverse

。@Hardyrock颜色不是问题！如何使搜索栏的大小与按钮的大小相同？因此，它们看起来像一个实体。它们看起来有点交叉。请确保您使用了适当的引导css文件。在这里似乎工作得很好：JSFIDLE很好，但是我在我的终端上运行它时得到了交叉组件。我能想到的两个可能的原因是：1）引导样式被您端的自定义css代码覆盖。2） 您可能正在使用一个旧版本的引导，它可能不支持“输入组”（只是一个想法，真的不确定）。fiddle使用了最新的v3.3.2。我也使用了3.3.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>