1

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

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

.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 代码来显示导航栏中的链接一个低于另一个？

4

1 回答 1

2

它实际上非常简单，您只需要以下 css 规则：

.navbar .nav {
    width: 100%;
}

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

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

于 2012-11-17T12:12:03.983 回答