twitter-bootstrap - 如何使 bootstrap 3's navbar' s 输入大小以填充其余空间？

Question

我想在 navbar-form 中使用输入组，如以下代码:

<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 是否控制输入的宽度。

input-group-btn 有两个 css 设置，显示:table-cell；宽度: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 中都可以正常工作，但我希望它占用导航栏的其余空间。就像 facebook 的搜索栏一样。

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

Answer 1

我刚才也有同样的问题。

我使用 Safari，不幸的是，表单元素占据了整行(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属性不能解决它......但不知道为什么。