11

我想要一个引导导航栏，其中一些导航项目左对齐，一些右对齐，有些位于它们之间的剩余空间的中心。

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a>Left</a></li>
        </ul>
        <ul class="nav nav-center">
            <li><a>Center 1</a></li>
            <li><a>Center 2</a></li>
        </ul>
        <ul class="nav pull-right">
            <li><a>Right</a></li>
        </ul>
    </div>
</div>

这个 jsfiddle http://jsfiddle.net/b7whs/显示了这一点——我希望中心 1 和中心 2 导航项放在一起，在导航栏中居中。这可能吗？

关于如何做到这一点，这里有很多建议；他们都没有为我工作。这甚至可能吗？

就我而言，左右两边的大小总是相同的，所以我认为应该是可行的。

4

4 回答 4

18

您只需要几种样式即可获得我认为您想要的行为。看起来您正在走使display:inline-block元素居中的路线，所以我将继续沿用这种方法。对于您现有的样式，添加/修改定义，以便包含这些样式：

.nav.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}

这样，这两个选项应该移动到导航栏的确切中心。这是一个JSFiddle 示例，向您展示这会是什么样子。我希望这就是你要找的！如果没有，请告诉我，我很乐意提供进一步的帮助。

于 2013-07-24T04:15:04.893 回答
2

今天自己才找到解决方案。

只需将 CSS 添加为：

/* center the navbar*/
.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

.center .dropdown-menu {
    text-align: left;
}

并像这样将中心类添加到导航栏

<div class="navbar navbar-inverse navbar-fixed-top center">
  <div class="navbar-inner">
    <div class="container center">
      ----
    </div>
  </div>
</div>
于 2013-07-24T08:49:07.237 回答
0

实际上在引导程序中使用这个 cssli并且ul是浮动的 http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.nav.nav-center {
    display: inline-block;
    left: 0;
    right: 0;
    text-align:center;width:70%;
}
.nav.nav-center li,.nav.nav-center li  a{display:inline;float:none;line-height:40px;}
于 2013-07-24T03:57:28.857 回答
0

添加此代码

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">products</a></li> </ul> </div>

于 2018-02-02T16:20:12.657 回答