Twitter bootstrap 如何制作bootstrap3'；s导航栏'；要用剩余空间填充的输入大小？

我想使用navbar表单中的输入组，如以下代码：

<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中都能正常工作，但我希望它能占据导航栏的剩余空间。就像facebook的搜索栏

---

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

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

-您的中堂物品将分别放置在此处
-您的中堂物品将分别放置在此处
-您的中堂物品将分别放置在此处

---

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

我刚才也有同样的问题

我使用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

属性无法修复它…但不知道为什么。

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

.less

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

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

或.css

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

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

---

这与李无关。也许我当时不清楚你的问题。我的印象是你想要导航条的整个宽度，但实际上只是输入来填充剩余的空间，我很抱歉。你可以尝试使用bootstrap的class=“span3”（示例）来设置输入，而不是手动设置。我也有同样的问题@Mik378解决方案还可以，但无法匹配所有可用空间。期待找到解决方案！也许Github上应该出现问题？我明白你的意思，这是一个很好的解决方案，我必须将百分比管理到正确的数字，非常感谢发生在我身上的同样的事情，但在我的情况下，我没有使用表单，只使用带有“input group”类的div，我需要输入一个style=“width:120px”为了防止它100%聚焦。谢谢，这是一个类似的问题，但解决方案几乎是一样的。