Question

使用角度和引导导航栏。当屏幕在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

Answer 2

看起来这是一些项目的组合。首先是仅在屏幕大小超过767px时浮动的几个项目的min-width宽度媒体查询。（你可以将它们放在max-width里面而不是保留默认值，但是你想要设置它们）

.navbar-nav,
.navbar-nav > li,
.navbar-header {
    float: left;
}

然后，min-width查询中的这个小错误的宽度在另一个媒体查询的流量集中抛出了一个扳手

.input-group-btn {
    width: 1%;
    ...
    ...
}

同样，我设置了一些没有查询的项目，您可以填入max-width查询或只是将它们设置为默认值。

http://jsfiddle.net/evanbriggs/9xtLtrr4/

Answer 3

Evan和mccannf帮助我确定我的宽度样式正在更新，但它们的值未在chrome dev工具中准确反映出来。根据他们的建议，我发现以下添加到我的CSS是最好的解决方案。

.pull-right .navbar-form .input-group .input-group-btn {
  width: auto;
}

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

3 个答案: