如何使用类似于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内的所有内容放在<div class="container">内。

Answer 2

我喜欢将链接始终对齐到中心的一个很好的技巧是使用line-height：

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

使其与容器div的高度相同，无论是放在.navbar-inner还是.nav都是你的电话。但它会使链接的文本始终在中间垂直对齐。

使用bootstrap框架，.navbar-inner应该将相同的css应用于.container或.container-fluid（取决于您是否使用流体布局）。对于非流体布局，这意味着以下规则：

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

流体布局这意味着：     .navbar-inner {         填充：0 20px;     }