it-swarm.com.ru

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

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

У меня есть строка, содержащая два столбца с небольшим количеством 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>
22
ChoclateLove

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

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

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

23
Chuks

Например, вы можете просто добавить класс «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:

 enter image description here

24
Rich

Обновление 2018

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

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

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


Параметр no extra CSS в Bootstrap 4 использует sizing 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

18
Zim

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

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

Следовательно, следующий класс CSS может сделать это:

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

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

5
Binh Nguyen

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

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

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

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