2

我们如何创建一个类似于 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>
4

2 回答 2

0

你需要把所有东西都放在navbar-inner里面<div class="container">。

于 2013-06-13T03:23:05.127 回答
0

我喜欢将链接始终对齐到中心的一种很好的技术是使用行高：

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

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

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

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

流畅的布局这意味着：.navbar-inner { padding: 0 20px; }

于 2013-06-13T03:26:55.380 回答