8

我想在 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 中，搜索采用了全新的方式。我想知道引导程序的 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 的搜索栏一样。

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

4

3 回答 3

6

我刚才也有同样的问题。

我使用 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属性不能解决它……但是不知道为什么。

于 2013-08-21T12:41:29.337 回答
2

这是一个 Chrome 错误（请参阅此处）。无需使用硬 CSS。您可以通过以下方式修复它：

。较少的

@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;
  }
}
于 2014-06-09T22:33:38.433 回答
0

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

您可以将表单标记放在列表项标记之一内，而不是将导航栏归类为表单本身。

于 2013-08-21T02:49:32.663 回答