Question

目前我正在使用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，但是试用了一下＆amp;错误的方法结合这么大的CSS文件并不是真的值得推荐我想，这就是我问你的原因：需要什么CSS代码，一个在另一个下方显示导航栏内的链接？

Answer 1

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

.navbar .nav {
    width: 100%;
}

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

所以你是对的，这是需要设计风格的li，而不是锚：）

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

1 个答案: