1

这是我正在开发的 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>

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

4

1 回答 1

0

首先，这不能仅使用引导程序的 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%;（可能会摆弄那个）

于 2013-11-27T01:19:37.563 回答