css - Twitter の Bootstrap 3 で同じページに複数のナビゲーション バーを表示

Question

同じページのドロップダウンにある複数のナビゲーション バーは、他のナビゲーション バーと重なって表示されます。以下を参照してください。

これを防ぐ方法は？

Answer 1

ナビゲーション バーは 1 回の使用を目的としていますが、ページごとに複数のナビゲーション バーを自由に使用できます。同じページの複数のナビゲーション バーは同じ z-index (1000) を持つため、ドロップダウンが重なる場合があります。より多くのナビゲーション バーを使用する場合は、それぞれに異なる z-index (および ID) を指定します。2 番目の z-index は最初の z-index よりも低くする必要があります。

次のようなナビゲーションバーを使用してください。 <nav id="navbar1" class="navbar" role="navigation"> <nav id="navbar2" class="navbar" role="navigation"> <nav id="navbar3" class="navbar" role="navigation"> <nav id="navbar4" class="navbar" role="navigation">

次の方法で z インデックスを設定します。

#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}