Impostazione della larghezza di un elenco a discesa in Bootstrap 3.0

Question

Come posso impostare la larghezza di un pulsante di attivazione a discesa nel bootstrap 3.0 per essere uguale alla larghezza dell'elenco a discesa? Simile a ciò che si ottiene quando si usa bootstrap-select (http://silviomoreto.github.io/bootstrap-select/). Ho cercato di avvolgere l'intero elenco in un div con una classe col- *, ma questo non sembra funzionare:

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

Così, mi piacerebbe: larghezza tasto = lista menu a discesa = col- * larghezza.

Answer 1

ho trovato il soluzione impostando il menu a discesa e la larghezza del pulsante = 100%.

.dropdown-menu { 
    width: 100%; 
} 

.btn{ 
width: 100%; 
} 

Ora il pulsante e l'elenco a discesa hanno la stessa larghezza, controllata dalla larghezza della colonna.

Answer 2

se ho capito bene che si desidera per lo stile la larghezza del menu in base all'opzione più grande si deve sostituire la proprietà min-width del .dropdown-menu lista come:

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

Demo: http://jsfiddle.net/faxyz/4/

Answer 3

È possibile impostare la larghezza di .dropdown-toggle. Si consiglia di utilizzare i puntini di sospensione text-overflow quando il menu a discesa diventa troppo piccolo. Non è necessario stile .dropdown-menu. È possibile impostare la larghezza del menu a discesa su qualsiasi altro valore se si desidera utilizzarlo in .input-group o non nella griglia.

.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); 
} 

Answer 4

Sono venuto qui in cerca di una soluzione ad un problema simile, anche se nel mio caso la discesa non era all'interno di un div col. Volevo che il pulsante a discesa corrispondesse alla larghezza dell'elenco a discesa, in base alla larghezza del contenuto di qualsiasi altro campo, simile a un menu a discesa di selezione. Se qualcuno è alla ricerca di una soluzione simile qui è:

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

In questo esempio ho voluto la discesa galleggiava a destra, ma può essere altrettanto facilmente ottimizzato per lavorare come più vi piace.