Ottieni twitter bootstrap btn-group per operare come barra di navigazione raggruppata con menu a discesa

Question

Ho cercato di ottenere Twitter Bootstrap btn-group con menu a discesa per lavorare con più pulsanti che hanno un menu a discesa.

Esempio:

<div class="btn-group"> 
     <a href="#" class="btn">1</a> 
     <a href="#" class="btn">2</a> 
     <a href="#" class="btn">3</a> 
     <a href="#" class="btn">4</a> 
     <a href="#" class="btn">5</a> 
    </div> 

E anche il mio tentativo: http://jsfiddle.net/x2BGB/

Viene visualizzato un gruppo di pulsanti. Vorrei che alcuni dei pulsanti di quel gruppo avessero menu a discesa.

Un esempio di quello che sto cercando di realizzare è:

Nota: il pulsante "bar" raggruppati non dovrebbe avere cornes arrotondati quando un pulsante si trova accanto a un altro pulsante. (lato destro).

Answer 1

Ho creato una classe btn-toolbar2 per evitare conflitti e il comportamento predefinito di btn-toolbar.

Gli elenchi a discesa devono essere nel proprio gruppo btn.

<div class="btn-toolbar btn-toolbar2"> 
    <div class="btn-group"> 
    <button class="btn">Dashboard</button> 
    </div> 
    <div class="btn-group"> 
    <button class="btn">Button 1</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li><li><a href="#">Separated link</a></li> 
    </ul> 
    </div> 
    <div class="btn-group"> 
    <button class="btn">Item 3</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </div> 
</div> 

con il css

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.btn-toolbar2 >.btn-group + .btn-group { 
margin-left: -5px; 
} 

.btn-toolbar2 > .btn-group > .btn, .btn-toolbar2 > .btn-group > .dropdown-toggle 
{ 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
} 

.btn-toolbar2 > .btn-group:first-child > .btn, .btn-toolbar2 > .btn-group:first-child > .dropdown-toggle{ 
    -webkit-border-bottom-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
    -webkit-border-top-left-radius: 4px; 
    border-top-left-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    -moz-border-radius-topleft: 4px;  
} 

.btn-toolbar2 > .btn-group:last-child > .btn:last-child, .btn-toolbar2 > .btn-group:last-child > .dropdown-toggle:nth-last-child(2){ 
    -webkit-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    -webkit-border-top-right-radius: 4px; 
    border-top-right-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
    -moz-border-radius-topright: 4px;  
} 

http://jsfiddle.net/baptme/x2BGB/4/

Answer 2

Il Bootstrap documentation per gruppi di pulsanti afferma questo:

Bottoni con menù a discesa devono essere avvolti individualmente nel proprio .btn-gruppo all'interno di un .btn-barra degli strumenti per una corretta rappresentazione.

Ovviamente se si esegue questa operazione, ogni pulsante si siede separatamente, ovvero si perde l'effetto della barra degli strumenti. Sembra quindi che non sia possibile avere più menu a discesa nella stessa barra degli strumenti: immagino che questa sia una limitazione di come Bootstrap implementa i menu a discesa.

È possibile avere più menu a discesa in un nav-bar, quindi è possibile utilizzarlo.

Answer 3

Basta usare:

<div class="btn-group"> 
     <button class="btn" onclick="window.location.href='http://whatever.location';"> 
     ... 
     ... 
    </div> 

Answer 4

Aggiungere questo CSS per risolvere il problema:

.btn-group > .btn-group { 
    float: left; 
} 
.btn-group > .btn-group > .dropdown-toggle { 
    .border-radius(0); 
} 
.btn-group > .btn-group > .dropdown-toggle:first-child { 
    -webkit-border-top-left-radius: 4px; 
     -moz-border-radius-topleft: 4px; 
      border-top-left-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
     -moz-border-radius-bottomleft: 4px; 
      border-bottom-left-radius: 4px; 
} 
.btn-group > .btn-group > .dropdown-toggle:last-child { 
    -webkit-border-top-right-radius: 4px; 
     -moz-border-radius-topright: 4px; 
      border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
     -moz-border-radius-bottomright: 4px; 
      border-bottom-right-radius: 4px; 
} 

Come appare