html - Twitter Bootstrap V 3.0 动态居中导航

Question

使用 Bootstrap 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用于测试。