0

ブートストラップで折りたたみ可能なクラスのメニューを作成しまし.nav-collapseた。ウィンドウのサイズを変更すると、ウィンドウが消えます。だから私は.nav-collapseこのcssでクラスをオーバーライドしました:

.nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: visible;
}

これは、毎回行う望ましい方法ではありません。このjsfiddleを見て、CSSから上記のスタイルを削除してください。理解しやすくなります。

質問:ブートストラップで水平メニューを積み重ねるための簡単なビルトイン ソリューションはありますか?

4

2 に答える 2

3

ブートストラップにはスタッキングが組み込まれています: http://twitter.github.io/bootstrap/components.html#navs

.nav-collapseこれは、あなたの状況では正しいレイアウトです:

<div class="top-nav">
    <div class="container-fluid">
        <div class="nav-collapse collapse">
            <ul class="nav nav-tabs">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

bootstrap-responsive.css次に、デフォルトのメディア クエリを別の .xml でオーバーライドしますbootstrap-overrides.css。

@media (max-width: 979px) {
    .top-nav .nav-collapse, .top-nav .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
}

フィドル

于 2013-05-13T09:27:19.860 に答える