web-dev-qa-db-ja.com

Bootstrap 4ドロップダウン-popper.jsによる自動配置を無効にします

私はBootstrap 4ドロップダウンを使用しており、約18のドロップダウン項目があります。高さが高すぎるため、popper.jsは自動的にドロップダウンを元の位置から画面の上部に移動します。これを防ぐにはどうすればよいですか？ドロップダウンを、それを切り替えるボタンの真下に常に表示させたいと思います。

要求に応じてコードを投稿する-（私はC＃を使用していますが、コードは私が望んでいる点を伝えるはずです）

             <div class="dropdown">
                <span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @topMenu.Name
                </span>
                <div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
                    @foreach (var subMenu in topMenu.SubMenu)
                    {
                        <a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)">@subMenu.Name</a>

                    }
                </div>
            </div>
csstwitter-bootstrapbootstrap-4popper.js
6
Vishwas

Bootstrap 4.1。ZimSystemsはそれをほぼ正しくしました。4.1。開いている間にドロップダウンの方向を変更することを無効にするには、別名x-placement = "bottom-end"ですが、代わりに "flip"オプションを使用する必要があります「表示」オプションの。

Display staticは配置を完全に無効にしますが、flipは画面の上部に向かってスクロールしたときにドロップダウンを上下逆にするLIVEチェックのみを無効にします。

1
Karl Johan Vallner

私はこれをBootstrap 4.3.1でdata-flip="false"をドロップダウン要素に追加します。

例：<a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>

1
Dominique