0

上部にある Github のバーは、Bootstraps navbar クラス ( https://github.com/ ) を使用して複製しようとしているものです。

コア要素が固定された列に配置されたまま、バーが拡張されてブラウザ ウィンドウ全体に表示されることに注目してください。それが私が理解しようとしているものです。

次のコードがあります。 

<body>
    <div class="container">

    <div class="row">
        <div class="span12">
            <img src="/img/logo_sml.png">
        </div>
    </div>
</div>

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Home</a>
    </div>
</div>

私の考えでは、 main を閉じるとcontainer、 を配置してnavbar、ブラウザー全体の長さを埋めることができます。これは計画どおりに機能しましたが、に追加するnavbarと、ページの左側にずっと表示されます (予想どおり)。

そう！container次に、メニュー項目を配置する新しいものを開始できると考えたので、中央の列に表示する必要がありました。

メニュー要素をまとめる:

<body>
    <div class="container">

        <div class="row">
            <div class="span12">
                <img src="/img/logo_sml.png">
            </div>
        </div>
    </div>

    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div class="span2">
                    <a class="brand" href="#">Home</a>
                </div>
            </div>
        </div>
    </div>

ページを更新しましたが、うまくいきませんでした。navbarコンテンツをメインに保ちながら、ブートストラップの「テール」を拡張する方法はありcontainerますか?

contatinerクラスに追加した結果は次のとおりです。要素はブラウザの左側にずっと配置されています。

ここに画像の説明を入力

4

1 に答える 1