web-dev-qa-db-fra.com

Augmenter la largeur du menu déroulant bootstrap

se demander si quelqu'un a des conseils sur la façon d'augmenter la largeur de la liste déroulante?

J'ai une ligne contenant deux colonnes avec un peu de javascript qui fait glisser la liste déroulante vers le haut et vers le bas une fois sélectionné. Le problème que je rencontre est que je n'arrive pas à comprendre comment augmenter la largeur de la liste déroulante lorsque cette option est sélectionnée. Idéalement, la liste déroulante devrait correspondre à la taille de la colonne. Mais ce qui se passe, c’est que la largeur de la liste déroulante n’a que la même taille que le texte qu’elle contient. Quelqu'un a-t-il une suggestion à faire pour augmenter la largeur de la liste déroulante afin de correspondre à la taille de la colonne?

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

Ajouter la classe css suivante

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

Bien sûr, vous pouvez utiliser ce qui correspond à vos besoins.

23
Chuks

Vous pouvez par exemple simplement ajouter une classe "col-xs-12" au <ul> qui contient les éléments de la liste:

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

Cela a fonctionné sur n'importe quelle résolution d'écran de mon site. La classe correspondra à la largeur de la liste avec sa valeur div, je crois:

 enter image description here

24
Rich

Mise à jour 2018

Vous devriez pouvoir juste le définir en utilisant CSS comme ceci ..

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

Cela fonctionne à la fois dans Bootstrap 3 et Bootstrap 4.0.0 (démo) .

Une option no extra CSS dans Bootstrap 4 utilise le sizing utils pour modifier la largeur. Par exemple, ici, la classe w-100 (width: 100%) est utilisée pour que le menu déroulant remplisse la largeur de son parent ....

 <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

Nous avons généralement besoin de contrôler la largeur du menu déroulant; C'est particulièrement essentiel lorsque le menu déroulant contient un formulaire, par exemple. formulaire de connexion --- le menu déroulant et ses éléments doivent être suffisamment larges pour faciliter la saisie du nom d'utilisateur/email et du mot de passe.

En outre, lorsque l'écran est inférieur à 768px ou lorsque la fenêtre (contenant le menu déroulant) est réduite à une taille inférieure à 768px, Bootstrap 3 modifie en réponse le menu déroulant à la largeur totale de l'écran/de la fenêtre. Nous devons garder cette action responsable.

Par conséquent, la classe css suivante pourrait le faire:

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

(Je l'avais utilisé dans mon application web.)

5
Binh Nguyen

Habituellement, le souhait est de faire correspondre la largeur du menu à la largeur du parent déroulant. Ceci peut être réalisé facilement comme ceci:

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

Le texte ne sera jamais renvoyé à la ligne suivante. Le texte continue sur la même ligne jusqu'à ce qu'un 
tag est rencontré.

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