Question

如何创建如下所示的导航栏，其左侧为260px，右侧为260px，宽度为中心100%。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">

    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="brand" href="#">Project X</a>

    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
      </ul>

      <ul class="nav pull-right">
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li>
          <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
            Menu 2
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="propertiesSearch.php">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

以下是小提琴。 http://jsfiddle.net/gvw7j/10/

如何创建如下所示的导航栏，其左侧为260px，右侧为260px，宽度为中心100%。

Answer 1

从"pull-right"

移除<ul class="nav pull-right">

新密码：jsfiddle.net/gvw7j/16

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">

    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="brand" href="#">Project X</a>

    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
      </ul>

      <ul class="nav">
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li>
          <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
            Menu 2
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="propertiesSearch.php">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

Answer 2

试试这个Demo

.nav{
    width:100%;
    height:30px;
}
.left{
    width:260px;
    height:30px;
    background:red;
    float:left;
}
.center{
    width:calc(100% - 520px);
    width:-moz-calc(100% - 520px);
    width:-webkit-calc(100% - 520px);
    height:30px;
    background:gray;
    float:left;
}
.right{
    width:260px;
    height:30px;
    background:green;
    float:left;
}


<div class="nav">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

使用引导程序创建固定长度的导航栏

2 个答案: