如何使 bootstrap3 的导航栏的输入大小填充其余空间？

Question

我想使用导航栏形式的输入组，如下代码：

<form class="navbar-form navbar-left" role="search">
    <div class="input-group">
        <input class="form-control" placeholder="product" type="text">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
        </span>
    </div>
</form>

它在firefox中的固定大小约为200px。然而，在chrome或safari中，搜索采用了一条全新的路线。我想知道bootstrap的css是否控制了输入的宽度。

输入组btn得到两个css设置，显示：表格单元格；宽度：1%。这些是干什么的？

在文档中，默认搜索栏为：

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

它在firefox或chrome中都很好用，但我希望它占据导航栏的其余空间。就像脸书的搜索栏。

我是一个独立的开发人员，我不擅长前端设计，有人知道这个特殊的要求吗？

Answer 1

我刚才遇到了同样的问题。

我使用Safari，不幸的是，form元素占据了整行（100%的大小）（但在Firefox上，它没有）。

一个简单易行的解决方案是将表单的宽度精确到100%以下。

<form class="navbar-form navbar-left" style="width:40%" role="search">
    <div class="input-group">
        <input class="form-control" placeholder="product" type="text">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
        </span>
    </div>
</form>

注意：width-40类而不是style属性并不能修复它…但不知道为什么。

Answer 2

这是一个Chrome错误（请参阅此处）。没有必要使用硬CSS。您可以通过以下方式进行修复：

.less

@media (min-width: @grid-float-breakpoint) {
  .navbar-form {
    .input-group-btn,
    .input-group-addon {
      width : auto;
    }
  }
}

或.css

@media (min-width: 768px) {
  .navbar-form .input-group-btn,
  .navbar-form .input-group-addon {
    width: auto;
  }
}

Answer 3

你可以试试这样的。。。（此示例显示了使用引导Navbar的一种方法）

<div id="wrap">
 <div class="navbar navbar-fixed-top" style="z-index:11000">
  <div class="navbar-inner">
    <div class="container">
      <div class="nav-collapse">
        <ul class="nav">
          <li> - your nave items would each be placed into here </li>
          <li> - your nave items would each be placed into here </li>
          <li> - your nave items would each be placed into here </li>
        </ul>        
      </div>
    </div>
  </div>
 </div>
</div>

您可以将表单标记放置在其中一个列表项标记中，而不是将导航栏分类为表单本身。