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 に答える