Twitter Bootstrap 响应式导航栏 - 居中链接答案

【问题标题】：Twitter Bootstrap responsive navbar - centering linksTwitter Bootstrap 响应式导航栏 - 居中链接
【发布时间】：2012-11-17 20:12:03
【问题描述】：

目前，我正在使用 Twitter Bootstrap 构建我的第一个响应式网站，但遇到了一个我自己无法解决的问题。

我正在自定义媒体查询，但是当涉及到导航栏中的链接时，我被卡住了。我希望.brand 居中，导航链接应居中下方 - 每个链接都有一个新行。我设法在适当的媒体查询中使用此 CSS 代码将 .brand 居中：

.brand {
    display: block;
    width: 100%;
    text-align: center;
}

现在是链接。这是代码：

.navbar li a {
    display: block;
}

选择器似乎是正确的，因为当我指定背景颜色时，它会显示出来。但是使用display: block; 不会为每个链接生成一个新行。使用width: 100%; 也不会产生所需的形式。

我的猜测是它与每个链接所包含的li 有关。

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Thomas Glaser</a>
            <ul class="nav">
                <li><a href="#">Arbeiten</a></li>
                <li><a href="#about">Thomas</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
    </div><!-- /.navbar-inner -->
</div>

我试图摆弄 CSS，但我猜我并不真正推荐结合如此大的 CSS 文件使用试错法，这就是我问你的原因：需要什么 CSS 代码来显示链接在导航栏中一个在另一个下方？

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

其实很简单，只需要以下css规则：

.navbar .nav {
    width: 100%;
}

.navbar .nav > li {
    float: none;
    text-align: center;
}

所以你是对的，需要设置样式的是 li，而不是锚 :)

【讨论】：