web-dev-qa-db-ja.com

bootstrap=ドロップダウンメニューの幅を増やす

誰かがドロップダウン幅を増やす方法に関するヒントを持っているのだろうか？

選択したときにドロップダウンを上下にスライドさせる少しのJavaScriptを含む2つの列を含む行があります。私が抱えている問題は、選択したときにドロップダウンの幅を増やす方法がわからないように見えることです。理想的には、ドロップダウンは列のサイズと一致します。しかし、何が起こっているのですか？ドロップダウンの幅はドロップダウン内のテキストと同じサイズであるだけで、列のサイズに合わせてドロップダウンの幅を増やす方法について誰かが提案していますか？

<div class="row question">
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                First column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div><!-- end of the dropdown -->
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                second column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div>
    </div><!--end of the row question -->

<script>
     // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });
</script>
jqueryhtmlcsstwitter-bootstrapbootstrap-4
25
ChoclateLove

次のcssクラスを追加します

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

もちろん、ニーズに合ったものを使用できます。

26
Chuks

たとえば、リスト項目を保持する<ul>に「col-xs-12」クラスを追加するだけです。

<div class="col-md-6" data-toggle="dropdown">
            First column
            <ul class="dropdown-menu col-xs-12" role="menu" aria-labelledby="dLabel">
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
            </ul>
        </div>

これは私のサイトのどの画面解像度でも問題なく機能しました。クラスは、リストの幅を、私が信じているdivを含むものに一致させます：

enter image description here

28
Rich

2018年に更新

このようにCSSを使用して設定することができるはずです。

.dropdown-menu {
  min-width:???px;
}

これは、Bootstrap 3と Bootstrap 4.0.0（デモ） ）の両方で機能します。

追加のCSSオプションでブートストラップ4は utils のサイズを変更して幅を変更します。たとえば、ここではw-100（width：100％）クラスがドロップダウンメニューに使用され、その親の幅を埋めます...

 <ul class="dropdown-menu w-100">
      <li><a class="nav-link" href="#">Choice1</a></li>
      <li><a class="nav-link" href="#">Choice2</a></li>
      <li><a class="nav-link" href="#">Choice3</a></li>
 </ul>

https://www.codeply.com/go/pAqaPj59N0

23
Zim

通常、ドロップダウンメニューの幅を制御する必要があります。特に、ドロップダウンメニューにフォームが含まれている場合に不可欠です。ログインフォーム---ドロップダウンメニューとそのアイテムは、ユーザー名/メールアドレスとパスワードを入力しやすいように十分に広くなければなりません。

さらに、画面が768pxよりも小さい場合、またはウィンドウ（ドロップダウンメニューを含む）が768pxよりも小さい場合、Bootstrap 3は、ドロップダウンメニューを画面の幅全体に応じて拡大縮小します/ window。この応答アクションを維持する必要があります。

したがって、次のcssクラスでそれを行うことができます。

@media (min-width: 768px) {
    .dropdown-menu {
        width: 300px !important;  /* change the number to whatever that you need */
    }
}

（Webアプリで使用していました。）

7
Binh Nguyen

通常、メニューの幅をドロップダウンの親の幅に一致させることが望まれます。これは次のように簡単に実現できます。

.dropdown-menu {
  width:100%;
}
4
dpwrussell

テキストが次の行に折り返されることはありません。テキストは同じ行に続き、
タグが見つかりました。

.dropdown-menu {
    white-space: nowrap;
}
1
Norman Huth