web-dev-qa-db-fra.com

Définir la largeur d'une liste déroulante dans Bootstrap 3.0

Comment puis-je définir la largeur d'un bouton de déclenchement de liste déroulante dans bootstrap 3.0 pour qu'elle soit égale à la largeur de la liste déroulante? Semblable à ce qui est obtenu avec bootstrap-select ( http://silviomoreto.github.io/bootstrap-select/ ). J'ai essayé d'envelopper toute la liste dans une div avec une classe * de classe, mais cela ne semble pas fonctionner:

<div class="row">
<div class="col-xs-4 col-md-4">
    <div class="dropdown">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
          </ul>
    </div>
</div>

Ainsi, je voudrais: bouton largeur = liste du menu déroulant = col- * largeur.

javascripthtmlcsstwitter-bootstrap
37
graphmeter

J'ai trouvé la solution en configurant le menu déroulant et la largeur du bouton = 100%.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

Le bouton et la liste déroulante ont maintenant la même largeur, contrôlée par la largeur de la colonne.

38
graphmeter

Si je comprends bien, vous souhaitez styliser la largeur du menu en fonction de l'option la plus grande, vous devez remplacer la propriété min-width de la liste .dropdown-menu comme suit:

.dropdown-menu {
    min-width: 0px !important;
}

Démo: http://jsfiddle.net/faxyz/4/

27
Irvin Dominin

Vous pouvez définir la largeur de .dropdown-toggle.. Il est recommandé d’utiliser Ellipsis text-overflow lorsque la liste déroulante devient trop petite. Il n'est pas nécessaire de styler .dropdown-menu. Vous pouvez définir la largeur du menu déroulant sur n’importe quelle autre valeur si vous souhaitez l’utiliser dans .input-group ou non dans la grille.

.dropdown-toggle {   
    overflow: hidden;
    padding-right: 24px /* Optional for caret */;
    text-align: left;
    text-overflow: Ellipsis;    
    width: 100%;
}

/* Optional for caret */
.dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
}
9
Ben Besuijen

Je suis venu ici à la recherche d'une solution à un problème similaire, bien que dans mon cas, la liste déroulante ne se trouve pas dans un col div. Je voulais que le bouton de liste déroulante corresponde à la largeur de la liste déroulante, en fonction de la largeur du contenu de celle qui est la plus large, similaire à une liste déroulante sélectionnée. Si quelqu'un cherche une solution similaire, voici:

.dropdown-container {
  float:right;
  height:60px;
}
.position-dropdown-controller {
  position: absolute;
  right:0;
}

.dropdown-toggle,
.dropdown-menu {
  width: 100%;
  min-width: 0;
}

.dropdown-toggle {
  text-align: right;
}

.dropdown-menu {
  height: 0;
  text-align: center;
  display: block !important;
  visibility: hidden;
  position: relative;
  float: none;
}

.open .dropdown-menu {
  display: block !important;
  visibility: visible;
  height: auto;
}

<div class="dropdown-container">
  <div class="position-dropdown-controller">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        ...
      </ul>
    </div>
  </div>
</div>

Dans cet exemple, je voulais que le menu déroulant soit placé à droite, mais il peut tout aussi bien être modifié pour fonctionner comme vous le souhaitez.

0
partypete25