Twitter Bootstrap V 3.0 动态居中导航

Question

使用引导程序 v3.0

我喜欢动态居中导航栏。即不硬编码宽度的修复。

这是如何实现的？下面是删除了多余标签的标准导航代码示例。

<!-- NAVBAR
================================================== -->
    <div class="navbar-wrapper">
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">All Saints Church, Ripley.</a>
                </div>
                <div class="navbar-collapse collapse" >
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<!-- ./NAVBAR -->

文档状态浮动导航栏右插入 .navbar-right @<ul class="nav navbar-nav navbar-right"> ... 此处显示http://getbootstrap.com/components/#navbar-component-alignment。

遵循此问题的方法：twitter bootstrap -- center brand in nav bar 我无法使用 margin-left: auto 集中导航；和margin-right: auto;

非常感谢任何帮助。

Answer 1

郑重声明，我不太喜欢这个解决方案 =) 但是一种蛮力的方法可能是添加以下 CSS：

.nav.navbar-nav {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

以及以下 jQuery 强制从继承自 .container 的 auto 减小宽度：

var width = 0, $navbarLinks = $(".nav.navbar-nav");

$navbarLinks.children().each( function(idx) {
    width += $(this).outerWidth();
});

$navbarLinks.width(width);

请参阅jsFiddle 进行测试。

Answer 2

我发现为此目的使用 nav-justified 类是最简单的方法。

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Demo

您还可以使用额外的类来限制宽度。请参阅演示中的第二个导航栏。