html - ブートストラップを使用して他の 1 つの下にある 2 つのナビゲーション バー

Question

Bootstrap から始めていますが、navbar 要素に小さな問題があります。幅 1024px のコンテナーを宣言し、2 つのナビゲーション バーを追加する必要があります。上部に、もう 1 つはその下にあります。両方のナビゲーション バーは、右の div から 0px の距離が必要です。

(Stackoverflow は私に写真を投稿させたくないのですが、私が何を言おうとしているのか理解できれば、はるかに簡単だと思います: http://www.abload.de/img/asdjraik.png )

ご覧のとおり、最初のナビゲーション バーは正しく機能していますが、その下にもう 1 つ必要です。その下のコンテナーからのパディングは、正確に 5px にする必要があります。

私の問題は、他のナビゲーションバーが最初のナビゲーションバーと同じパディングを上から得ることです。私はそれを他のものより下にすることはできません。この問題に対して次のクラスを定義すると、別のクラスが発生します。

.small-margin {
    margin-top: 20px;
}    

.big-margin {
    margin-top: 110px;
}

私のHTMLは次のようになります。

    <div class="navbar small-margin">
        <div class="navbar-inner">
            <div class="pull-right">
                <ul class="nav">
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="navbar big-margin">
        <div class="navbar-inner">
            <div class="pull-right">
                <ul class="nav">
                    <li><a href="#">another link 1</a></li>
                    <li><a href="#">another link 2</a></li>
                </ul>
            </div>
        </div>
    </div>

2 番目のナビゲーション バーは、最初のナビゲーション バーの下ではなく、左側に表示されます。私は多くのCSS修正を試みました。

2番目のナビゲーションバーを最初のナビゲーションバーの下に配置する方法を知っている人はいますか?

前もって感謝します！