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属性无法修复它...但不知道为什么。

Answer 2

这是Chrome错误（请参阅here）。没有必要使用硬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

你可以试试这样的东西......（这个例子展示了一种使用Bootstraps 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>

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

如何制作bootstrap 3导航栏输入大小以填充其余空间？

3 个答案: