twitter-bootstrap - Twitter-Bootstrap -- 导航栏搜索按钮出现在搜索字段下方

Question

哎呀。我已经尝试了一切，但无法弄清楚这一点。很确定我错过了一些明显的东西。

我希望搜索按钮出现在搜索字段旁边，但由于某种原因，它出现在它的下方。我到底错过了什么？

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">The Brand Goes Here</a>
</div>

<!-- toggled items -->
<div class="collapse navbar-collapse main-navbar">
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input  type="text" class="form-control" placeholder="search">
    </div>
    <button type="submit" class="btn btn-default">submit</button>
  </form>
</div>
<!-- end toggled items -->

Answer 1

我假设您的意思是“提交”按钮。它当前位于带有文本字段的 div 元素之外，因此它位于新行上。

尝试这个：

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">The Brand Goes Here</a>
</div>

<!-- toggled items -->
<div class="collapse navbar-collapse main-navbar">
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input  type="text" class="form-control" placeholder="search">
    <button type="submit" class="btn btn-default">submit</button>
    </div>

  </form>
</div>
<!-- end toggled items -->