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%;（可能是为了摆弄那个）

在Bootstrap导航栏中使元素拉伸全宽

1 个答案: