css - 在 Bootstrap 导航栏中使元素拉伸(stretch)全宽

Question

这是我正在开发的 Web 应用程序的导航栏示意图:

[品牌[按钮] [按钮] [-----输入字段-----] -----空白区域----- [按钮]]

我的代码(简化版)如下所示:

<div class="container-fluid">
  <div class="navbar navbar-static-top no-print">
    <div class="navbar-inner">
      <a class="brand" href="#">Brand</a>
      <ul class="nav">
        <li><a href="#">
          <i class="icon-large icon-group"></i>
        </a></li>
        <li><a href="#">
          <i class="icon-large icon-list"></i>
        </a></li>
        <li id="search">
          <form class="navbar-search">
            <input type="text" class="input-xxlarge" placeholder="Search">
          </form>
        </li>
        <li><a href="#">
          <i class="icon-large icon-plus"></i>
        </a></li>
      </ul>
      <ul class="nav pull-right">    
        <li><a href="#">
          <i class="icon-large icon-lemon"></i>
        </a></li>
      </ul>
    </div>
  </div>
</div>

我希望输入字段覆盖空白区域并一直到达导航栏右侧的按钮。我怎样才能做到这一点？

Answer 1

首先，这不能只用 Bootstrap 的 css 来完成。 Bootstrap 使用列来放置它们的内容，这并不像您需要的那样动态。

我建议使用绝对定位来实现这一点。

.navbar-inner {
    position: relative;
}

.navbar-inner .input-xxlarge {
    position: absolute;
    left: (pixels from the left);
    right: (pixels from the right);
    width: auto;
}

免责声明:此输入需要改回 position: relative; width: 100%; 当你到达移动尺寸的屏幕时(可能会摆弄那个)