Obtener twitter bootstrap btn-group para operar como barra de navegación agrupada con menús desplegables

Question

He intentado obtener Twitter Bootstrap btn-group con el menú desplegable para trabajar con varios botones que tienen un menú desplegable.

Ejemplo:

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

Y también mi intento: http://jsfiddle.net/x2BGB/

Esto muestra un grupo de botones. Me gustaría que algunos de los botones en ese grupo tengan menús desplegables.

Un ejemplo de lo que estoy tratando de lograr es:

Nota: el botón "barra" agrupados no debería tener cornes redondeadas cuando un botón está al lado de otro botón. (lado derecho).

Answer 1

He creado una clase btn-toolbar2 para evitar el conflicto y superar el comportamiento predeterminado de la barra de herramientas btn.

Los desplegables deben estar en su propio grupo 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 el 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

El Bootstrap documentation para grupos de botones afirma esto:

botones con menús desplegables deben ser envueltos individualmente en su propio .btn grupo dentro de un .btn-barra de herramientas para la representación adecuada.

Obviamente, si hace esto, cada botón se coloca por separado, es decir, se pierde el efecto de la barra de herramientas. Por lo tanto, parece que no puede tener varias listas desplegables en la misma barra de herramientas. Supongo que esto es una limitación de cómo Bootstrap implementa las listas desplegables.

Puede tener varias listas desplegables en un nav-bar, por lo que es posible que pueda usar eso en su lugar.

Answer 3

sólo tiene que utilizar:

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

Answer 4

Añadir este CSS para solucionarlo:

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

¿Cómo se ve