未使用 Twitter Bootstrap 修复导航栏内容时居中？

Posted 2023-03-05

【中文标题】未使用 Twitter Bootstrap 修复导航栏内容时居中？

【英文标题】：Centering Navbar Content when it is not fixed with Twitter Bootstrap?

【发布时间】：2012-05-09 21:01:12

【问题描述】：

我正在尝试将“内容”置于导航栏的中心。当它是“navbar-fixed-top”时，UL 菜单居中。但是，由于我不想将菜单固定到顶部，因此我删除了该类，但现在菜单未居中。 它漂浮在左侧。它应该与容器的边缘对齐。 类似于http://twitter.github.com/bootstrap/scaffolding.html，但我不希望它固定在顶部。

这是代码

        <div class="navbar ">
            <div class="navbar-inner">
                <div class="container" >
                    <a 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>
                    </a>
                    <a class="brand" href="#">Project name</a>
                    <div class="nav-collapse">
                        <ul class="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><!--/.nav-collapse -->
                </div>
            </div>
        </div>

【问题讨论】：

我不确定我是否正确理解了您的问题，因此您想在 940px 容器中修复导航栏内容？ .container div 的宽度？

我实际上不想修复。而不是修复我想在标题之后使用它，例如如图所示。我想要的是内容向左浮动。它应该与中心对齐。像保证金：0自动；宽度：940 像素； ... .但它不起作用

你的意思是这样的：jsfiddle.net/5TpJH/1/show

【参考方案1】：

这曾经是默认行为，至少它在 2.0.1 中有效，但似乎在最新版本中发生了一些变化，因此当导航栏未修复时，导航栏内容不再居中。

解决方法似乎是将以下内容添加到您的 CSS：

.navbar-inner > .container  width:940px; 

【讨论】：

使用混合可能是更好的方法：@include core-span($gridColumns);

【参考方案2】：

使用navbar-static-top。

如果不起作用，请查看最新的引导程序版本。

【讨论】：

非常感谢！无法弄清楚出了什么问题，但添加该类就像一个魅力。