html - 为什么我的搜索字段在小于 768 像素的屏幕上会下拉一行？

Question

使用 Angular 和 Bootstrap 导航栏。当屏幕水平调整到 768px 以下时，右侧的搜索字段会下降到下面的行。我试图将它保持在顶行，只是让导航栏向右溢出。

这是一个笨蛋! http://plnkr.co/edit/krAGXP6JEVZpLFNvRlsw?p=preview

我正在使用 Chrome 32 来测试这个小部件。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Umbrella_Corporation_logo.png" style="width: 31px;height:35px;"/>
        </a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Foo</a>
          </li>
          <li>
            <a href="#">Bar</a>
          </li>
          <li>
            <a href="#">Baz</a>
          </li>
          <li>
            <a href="#">Bop</a>
          </li>
        </ul>
        <div class="pull-right">
          <form class="navbar-form" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" />
              <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

为什么这个愚蠢的搜索字段坚持在较小的屏幕上放下一行？

Answer 1

更正:input-group-btn 似乎是我遇到问题的原因。

添加这个:

.navbar-form .input-group-btn {
    display: block;
}

.navbar-form .input-group {
    margin-right: 30px;
}

确保搜索永远不会跳下来。

Plunker here