Augmenter la largeur du menu déroulant bootstrap
demandais si quelqu'un a des conseils sur la façon d'augmenter la liste déroulante de la largeur?
j'ai une rangée contenant deux colonnes avec un peu de javascript qui fait glisser le menu déroulant vers le haut et vers le bas lorsqu'il est sélectionné. Le problème que j'ai, c'est que je ne vois pas comment augmenter la largeur de la colonne lorsque sélectionnée, idéalement la hauteur de la colonne devrait correspondre à la taille de la colonne. Mais ce qui se passe est que le menu déroulant, la largeur est seulement de la même taille que le texte dans la liste déroulante quelqu'un suggestion sur la façon d'augmenter la largeur de descente pour 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>
6 réponses
ajouter la classe css suivante
.dropdown-menu {
width: 300px !important;
height: 400px !important;
}
bien sûr, vous pouvez utiliser ce qui correspond à votre besoin.
vous pouvez par exemple juste ajouter une classe "col-xs-12" à la <ul> qui contient la liste des éléments:
<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 fonctionnait bien sur n'importe quelle résolution d'écran de mon site. La classe va correspondre à la liste de la largeur à la div contenant je crois:
mise à Jour 2018
vous devriez être capable de le régler en utilisant CSS comme ceci..
.dropdown-menu {
min-width:???px;
}
cela fonctionne à la fois dans Bootstrap 3 et Bootstrap 4.0.0 (demo).
pas de supplément CSS option dans Bootstrap 4 dimensionnement utils pour changer la largeur. Par exemple, voici le w-100 (width:100%) class est utilisé pour le menu déroulant à remplir 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>
Habituellement nous avons le besoin de contrôler la largeur du menu déroulant; spécialement c'est essentiel quand le menu déroulant contient un formulaire, par exemple le formulaire d'ouverture de session --- alors le menu déroulant et ses éléments devraient être assez larges pour la facilité d'entrer le nom d'utilisateur/email et le mot de passe.
En outre, lorsque l'écran est plus petit que 768px ou lorsque la fenêtre (contenant le menu déroulant) est zoomée vers le bas à plus petit que 768px, Bootstrap 3 balance responsively le menu déroulant à la largeur entière de la écran/fenêtre. Nous devons garder cette action réponsive.
par conséquent, la classe CSS suivante pourrait faire cela:
@media (min-width: 768px) {
.dropdown-menu {
width: 300px !important; /* change the number to whatever that you need */
}
}
(j'avais utilisé dans mon application web.)
habituellement, le désir est de faire correspondre la largeur du menu à la largeur du parent de la liste déroulante. Cela peut être facilement réalisé comme ceci:
.dropdown-menu {
width:100%;
}
le texte ne passera jamais à la ligne suivante. Le texte continue sur la même ligne jusqu'à un
l'étiquette est rencontrée.
.dropdown-menu {
white-space: nowrap;
}