2

現在、ナビゲーションバーのメニュー内でドロップダウンを使用しています。ナビゲーションバーが高解像度レイアウトの場合、ドロップダウンは正常に機能します。

モバイル レイアウトで操作している場合、ドロップダウンが選択されているときにナビゲーション バーのサイズは変更されません。つまり、ナビゲーション バーを開いてから閉じてから、再度開いてください。これを行っているときに、最初の開口部でナビゲーション バーが下にスライドしないことに気付きました。これは、これが JavaScript イベントに関連していると思われます。

編集 - 前と後、およびレンダリング前のナビゲーション折りたたみマークアップを追加しました。nav-collapse div のレンダリング前のマークアップを使用して、Bootply で問題を再現できます。

事前にレンダリングされたマークアップ:

<div class="nav-collapse">
    @PageTemplateFeature("Main Navigation")
    <div class="pull-right">
        @PageTemplateFeature("Service Menu")
    </div>
</div>

再開前：

<div class="nav-collapse in collapse" style="height: 176px;">

再開する前に

再開後：

<div class="nav-collapse in collapse" style="height: auto;">

再開後

マークアップ:

<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
                <a href="/" class="brand"><span style="color: black;"></span>.COM</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="/">Home</a></li>
                        <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" tabindex="-1" id="drop_1">Magazine</a>
                            <ul aria-labelledby="drop_1" role="menu" class="dropdown-menu">
                                <li><a href="/Magazine/Current-Issue" tabindex="-1">Current Issue</a></li>
                                <li><a href="/Magazine/Digital-Edition" tabindex="-1">Digital Edition</a></li>
                            </ul>
                        </li>
                        <li><a href="/Blog">Blog</a></li>
                    </ul>
                    <div class="pull-right">
                        <ul class="nav">
                            <li><a href="/Sitemap"> Sitemap </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</div>

前もって感謝します。

4

1 に答える 1

2

解決策が見つかりました。nav-collapse div には、collapse クラスも必要です。

<div class="nav-collapse collapse">
    @PageTemplateFeature("Main Navigation")
    <div class="pull-right">
        @PageTemplateFeature("Service Menu")
    </div>
</div>

https://github.com/twitter/bootstrap/issues/5671

于 2013-06-07T09:37:07.853 に答える