html - 如何拥有类似于 Twitter Bootstrap 网站上的导航栏

Question

我们如何创建类似于 Twitter Boostrap 网站上的导航栏？导航栏是黑色的，更重要的是位于页面中间。链接的对齐度似乎也太高了。

使用下面的代码创建的导航栏是左对齐的。你如何让它像 Twitter Bootstrap 的网站一样以最大宽度居中。

目标导航栏

尝试

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
    <a class="brand" href="#">Bootstrap</a>
    <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Get Started</a></li>
        <li><a href="#">Scaffolding</a></li>
        </ul>
    </div>
</div>

Answer 1

我喜欢将链接始终对齐到中心的一个好技巧是使用行高:

.navbar-inner { height: 60px; }
.nav { line-height: 60px; }

让它与容器 div 的高度相同，这是放在 .navbar-inner 还是 .nav 是你的决定。但它会使链接的文本始终在中间垂直对齐。

使用 Bootstrap 框架，.navbar-inner 应该应用与 .container 或 .container-fluid 相同的 css(取决于您是否使用流体布局)。对于非流体布局，这意味着以下规则:

.navbar-inner {
    margin: 0 auto;
    width: 1140px; /* or whatever width you choose for your .container */
}

流体布局这意味着: .navbar-inner { 填充:0 20px；