2

自動的に折りたたまれる twitter ブートストラップ 3.0 で垂直ナビゲーションを実装しようとしました。

基本は動く(ウィンドウサイズが小さい=本来あるべきメニューが一番上にある)のですが、ブートストラップでデフォルトのナビゲーションバー機能を使うとそのまま崩れないのが難点です。

<div class="container-fluid">

        <div class="row">
            <div class="navbar-brand">
                <a href="<g:createLink uri="/" absolute="true" />">BABSI</a>
            </div>
            <button type="button" class="btn navbar-btn" data-toggle="collapse"
                    data-target="#sidebar">TOOGLE

                    Toggle navigation
                    <span class="icon-bar"></span> <span class="icon-bar"></span> 
                    <span class="icon-bar"></span>
                </button>
        </div>
        <div class="row">
            <header id="sidebar" class="col-md-2 collapse">

                <div class="row">

                                    <!-- generates ul structure -->
                    <nav:primary class="nav navbar-inverse nav-stacked" />
                </div>
            </header>
            <section id="content" class="col-md-10">
                <div class="row"></div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <g:layoutTitle />
                    </div>
                    <div class="panel-body">
                        <g:layoutBody />
                    </div>
                </div>
            </section>
        </div>
    </div>
4

2 に答える 2

1

これを試して。

<script>
    $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });
</script>
于 2016-10-07T13:48:10.077 に答える