Увеличить ширину меню выпадающего окна бутстрапа

интересно, есть ли у кого-нибудь советы о том, как увеличить ширину выпадающего списка?

У меня есть строка, содержащая два столбца с битом javascript, который уменьшает выпадающий список вверх и вниз при выборе. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу представить, как увеличить ширину выпадающего списка при выборе, в идеале выпадающее меню будет соответствовать размеру столбца. Но что происходит, так это то, что ширина раскрывающегося списка только того же размера, что и текст в раскрывающемся списке, у кого есть предложение о том, как увеличить ширину раскрывающегося списка в соответствии с размером столбца?

<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>

Ответ 1

Добавьте следующий класс css

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

Конечно, вы можете использовать то, что соответствует вашим потребностям.

Ответ 2

Например, вы можете просто добавить класс "col-xs-12" в <ul>, который содержит элементы списка:

<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, на который я верю:

Ответ 3

Обновление 2018

Вы должны иметь возможность просто установить его с помощью CSS следующим образом.

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

Это работает как в Bootstrap 3, так и в Bootstrap 4.0.0 (демонстрация).

Параметр без дополнительных CSS в Bootstrap 4 использует утилиты определения размера для изменения ширины. Например, здесь класс 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

Ответ 4

Обычно нам нужно контролировать ширину выпадающего меню; особенно важно, когда раскрывающееся меню содержит форму, например. форма входа в систему --- тогда выпадающее меню и его элементы должны быть достаточно широкими, чтобы легко вводить имя пользователя/адрес электронной почты и пароль.

Кроме того, когда экран меньше 768 пикселей или когда окно (содержащее раскрывающееся меню) уменьшено до 768 пикселей, Bootstrap 3 быстро масштабирует раскрывающееся меню на всю ширину экрана/окна. Нам нужно сохранить это повторное действие.

Следовательно, следующий класс css мог бы сделать это:

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

(Я использовал его в своем веб-приложении.)

Ответ 5

Обычно желание состоит в том, чтобы сопоставить ширину меню с шириной родителя выпадающего списка. Это можно легко сделать так:

.dropdown-menu {
  width:100%;
}

Ответ 6

Текст никогда не будет перенесен на следующую строку. Текст продолжается в той же строке, пока не встретится тег
.

.dropdown-menu {
    white-space: nowrap;
}

Ответ 7

Если у вас есть BS4, другой вариант может быть:

.dropdown-item { 
  width: max-content !important;
}

.dropdown-menu {

    max-height: max-content;
    max-width: max-content;
}