2012-07-02 30 views
9

Introducción: Una de las partes de mi sitio web requiere una pequeña barra de herramientas con dos menús desplegables uno al lado del otro. Traté de lograr esto mediante el siguiente marcado (simplificado):Twitter-Bootstrap: dos botones desplegables-alternar uno al lado del otro no funcionan correctamente

<div class="btn-group"> 
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"> 
     <span id="uniqueId">Text1</span> <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a onclick="javascript:someFunction()">Item1</a></li> 
     <li><a onclick="javascript:someFunction()">Item2</a></li> 
     ... 
    </ul> 
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"> 
     <span id="uniqueId2">Text2</span> <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a onclick="javascript:someOtherFunction()">Item1</a></li> 
     <li><a onclick="javascript:someOtherFunction()">Item2</a></li> 
     ... 
    </ul> 
</div> 

Me gustaría conseguir un aspecto agradable de dos botones de la barra con esquinas redondeadas sólo en los lados exteriores de la barra de herramientas.

Problema:

Cuando hago clic en cualquiera de los botones, los dos botones se muestran como "pulsado" y no puedo distinguir visualmente que uno que acaba de hacer clic. Todas las otras funciones funcionan correctamente, es decir, un menú se muestra correctamente y con las opciones correctas.

¿Hay alguna manera de hacer que esos botones cambien sus estilos por separado?

Actualización:

Yo sé que es muy posible conseguir este trabajo mediante el fraccionamiento de los botones de mi en dos btn-group s o (como se sugiere @Sherbrow) mediante el uso de divs. Bootstrap documentation sugiere también

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.

y me gustaría saber si es posible evitar de alguna manera este envoltorio individual y tener dos listas desplegables que se comporten correctamente dentro de un único grupo btn.

Creo que estoy preguntando sobre el comportamiento no estándar e indocumentado y aceptaré una respuesta "eso es imposible" si nadie puede sugerir una manera de hacerlo.

+0

¿Por qué ha etiquetado su pregunta con ASP.NET MVC? Muestre su marcado generado y CSS. De esta forma, las personas que no conocen ASp.NET MVC también podrían ayudarlo a diseñar cosas agradables. –

+0

@DarinDimitrov: Gracias por la sugerencia, lo haré de inmediato –

Respuesta

10

Olvidó su contenedor .dropdown.

Actualización 2: olvidé un código para grupos. E hizo una gist (github)

Actualización: hizo una mejor envoltura, y el estilo como botones. Este es básicamente otro estilo de botón, pero sin el equipaje de la clase .btn.

<div class="btn-group"> 
    <div class="dropdown dropdown-btn"> 
     <div class="dropdown-toggle" data-toggle="dropdown"> 
      <span id="uniqueId">Text1</span><span class="caret"/> 
     </div > 
     <ul class="dropdown-menu"> 
      <li><a onclick="javascript:someFunction()">Item1</a></li> 
      <li><a onclick="javascript:someFunction()">Item2</a></li> 
      <!-- ... --> 
     </ul> 
    </div> 
    <div class="dropdown dropdown-btn"> 
     <div class="dropdown-toggle" data-toggle="dropdown"> 
      <span id="uniqueId2">Text2</span><span class="caret"/> 
     </div > 
     <ul class="dropdown-menu"> 
      <li><a onclick="javascript:someOtherFunction()">Item1</a></li> 
      <li><a onclick="javascript:someOtherFunction()">Item2</a></li> 
      <!-- ... --> 
     </ul> 
    </div> 
</div> 

con un reglaje css grande (buttons.less y el botón-groups.less reutilizado cambiar .btn a .dropdown-btn de here (github)):

.dropdown-btn { 
    display: inline-block; 
    *display: inline; 
    /* IE7 inline-block hack */ 
    *zoom: 1; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    font-size: 13px; 
    line-height: 18px; 
    *line-height: 20px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #f5f5f5; 
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: linear-gradient(top, #ffffff, #e6e6e6); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 
    border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #e6e6e6; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    border: 1px solid #cccccc; 
    *border: 0; 
    border-bottom-color: #b3b3b3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    *margin-left: .3em; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
} 
.dropdown-btn:hover, 
.dropdown-btn:active, 
.dropdown-btn.active, 
.dropdown-btn.disabled, 
.dropdown-btn[disabled] { 
    background-color: #e6e6e6; 
    *background-color: #d9d9d9; 
} 
.dropdown-btn:active, 
.dropdown-btn.active { background-color: #cccccc \9 } 
.dropdown-btn:first-child { *margin-left: 0 } 
.dropdown-btn:hover { 
    color: #333333; 
    text-decoration: none; 
    background-color: #e6e6e6; 
    *background-color: #d9d9d9; 
    /* Buttons in IE7 don't get borders, so darken on hover */ 
    background-position: 0 -15px; 
    -webkit-transition: background-position 0.1s linear; 
    -moz-transition: background-position 0.1s linear; 
    -ms-transition: background-position 0.1s linear; 
    -o-transition: background-position 0.1s linear; 
    transition: background-position 0.1s linear; 
} 
.dropdown-btn:focus { 
    outline: thin dotted #333; 
    outline: 5px auto -webkit-focus-ring-color; 
    outline-offset: -2px; 
} 
.dropdown-btn.active, 
.dropdown-btn:active { 
    background-color: #e6e6e6; 
    background-color: #d9d9d9 \9; 
    background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
} 
.dropdown-btn.disabled, 
.dropdown-btn[disabled] { 
    cursor: default; 
    background-color: #e6e6e6; 
    background-image: none; 
    opacity: 0.65; 
    filter: alpha(opacity=65); 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 
.dropdown-btn-large { 
    padding: 9px 14px; 
    font-size: 15px; 
    line-height: normal; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.dropdown-btn-large [class^="icon-"] { margin-top: 1px } 
.dropdown-btn-small { 
    padding: 5px 9px; 
    font-size: 11px; 
    line-height: 16px; 
} 
.dropdown-btn-small [class^="icon-"] { margin-top: -1px } 
.dropdown-btn-mini { 
    padding: 2px 6px; 
    font-size: 11px; 
    line-height: 14px; 
} 
.dropdown-btn-primary, 
.dropdown-btn-primary:hover, 
.dropdown-btn-warning, 
.dropdown-btn-warning:hover, 
.dropdown-btn-danger, 
.dropdown-btn-danger:hover, 
.dropdown-btn-success, 
.dropdown-btn-success:hover, 
.dropdown-btn-info, 
.dropdown-btn-info:hover, 
.dropdown-btn-inverse, 
.dropdown-btn-inverse:hover { 
    color: #ffffff; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
} 
.dropdown-btn-primary.active, 
.dropdown-btn-warning.active, 
.dropdown-btn-danger.active, 
.dropdown-btn-success.active, 
.dropdown-btn-info.active, 
.dropdown-btn-inverse.active { color: rgba(255, 255, 255, 0.75) } 
.dropdown-btn { 
    border-color: #ccc; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
} 
.dropdown-btn-primary { 
    background-color: #0074cc; 
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -o-linear-gradient(top, #0088cc, #0055cc); 
    background-image: linear-gradient(top, #0088cc, #0055cc); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); 
    border-color: #0055cC#0055cC#003580; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #0055cc; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-primary:hover, 
.dropdown-btn-primary:active, 
.dropdown-btn-primary.active, 
.dropdown-btn-primary.disabled, 
.dropdown-btn-primary[disabled] { 
    background-color: #0055cc; 
    *background-color: #004ab3; 
} 
.dropdown-btn-primary:active, 
.dropdown-btn-primary.active { background-color: #004099 \9 } 
.dropdown-btn-warning { 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #fbb450, #f89406); 
    background-image: -ms-linear-gradient(top, #fbb450, #f89406); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); 
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406); 
    background-image: -o-linear-gradient(top, #fbb450, #f89406); 
    background-image: linear-gradient(top, #fbb450, #f89406); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); 
    border-color: #f89406 #f89406 #ad6704; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #f89406; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-warning:hover, 
.dropdown-btn-warning:active, 
.dropdown-btn-warning.active, 
.dropdown-btn-warning.disabled, 
.dropdown-btn-warning[disabled] { 
    background-color: #f89406; 
    *background-color: #df8505; 
} 
.dropdown-btn-warning:active, 
.dropdown-btn-warning.active { background-color: #c67605 \9 } 
.dropdown-btn-danger { 
    background-color: #da4f49; 
    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); 
    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: linear-gradient(top, #ee5f5b, #bd362f); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); 
    border-color: #bd362f #bd362f #802420; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #bd362f; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-danger:hover, 
.dropdown-btn-danger:active, 
.dropdown-btn-danger.active, 
.dropdown-btn-danger.disabled, 
.dropdown-btn-danger[disabled] { 
    background-color: #bd362f; 
    *background-color: #a9302a; 
} 
.dropdown-btn-danger:active, 
.dropdown-btn-danger.active { background-color: #942a25 \9 } 
.dropdown-btn-success { 
    background-color: #5bb75b; 
    background-image: -moz-linear-gradient(top, #62c462, #51a351); 
    background-image: -ms-linear-gradient(top, #62c462, #51a351); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); 
    background-image: -webkit-linear-gradient(top, #62c462, #51a351); 
    background-image: -o-linear-gradient(top, #62c462, #51a351); 
    background-image: linear-gradient(top, #62c462, #51a351); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); 
    border-color: #51a351 #51a351 #387038; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #51a351; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-success:hover, 
.dropdown-btn-success:active, 
.dropdown-btn-success.active, 
.dropdown-btn-success.disabled, 
.dropdown-btn-success[disabled] { 
    background-color: #51a351; 
    *background-color: #499249; 
} 
.dropdown-btn-success:active, 
.dropdown-btn-success.active { background-color: #408140 \9 } 
.dropdown-btn-info { 
    background-color: #49afcd; 
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); 
    background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); 
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); 
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); 
    background-image: linear-gradient(top, #5bc0de, #2f96b4); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); 
    border-color: #2f96b4 #2f96b4 #1f6377; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #2f96b4; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-info:hover, 
.dropdown-btn-info:active, 
.dropdown-btn-info.active, 
.dropdown-btn-info.disabled, 
.dropdown-btn-info[disabled] { 
    background-color: #2f96b4; 
    *background-color: #2a85a0; 
} 
.dropdown-btn-info:active, 
.dropdown-btn-info.active { background-color: #24748c \9 } 
.dropdown-btn-inverse { 
    background-color: #414141; 
    background-image: -moz-linear-gradient(top, #555555, #222222); 
    background-image: -ms-linear-gradient(top, #555555, #222222); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); 
    background-image: -webkit-linear-gradient(top, #555555, #222222); 
    background-image: -o-linear-gradient(top, #555555, #222222); 
    background-image: linear-gradient(top, #555555, #222222); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); 
    border-color: #222222 #222222 #000000; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #222222; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.dropdown-btn-inverse:hover, 
.dropdown-btn-inverse:active, 
.dropdown-btn-inverse.active, 
.dropdown-btn-inverse.disabled, 
.dropdown-btn-inverse[disabled] { 
    background-color: #222222; 
    *background-color: #151515; 
} 
.dropdown-btn-inverse:active, 
.dropdown-btn-inverse.active { background-color: #080808 \9 } 
button.dropdown-btn, 
input[type="submit"].dropdown-btn { 
    *padding-top: 2px; 
    *padding-bottom: 2px; 
} 
button.dropdown-btn::-moz-focus-inner, 
input[type="submit"].dropdown-btn::-moz-focus-inner { 
    padding: 0; 
    border: 0; 
} 
button.dropdown-btn.dropdown-btn-large, 
input[type="submit"].dropdown-btn.dropdown-btn-large { 
    *padding-top: 7px; 
    *padding-bottom: 7px; 
} 
button.dropdown-btn.dropdown-btn-small, 
input[type="submit"].dropdown-btn.dropdown-btn-small { 
    *padding-top: 3px; 
    *padding-bottom: 3px; 
} 
button.dropdown-btn.dropdown-btn-mini, 
input[type="submit"].dropdown-btn.dropdown-btn-mini { 
    *padding-top: 1px; 
    *padding-bottom: 1px; 
} 
.btn-group { 
    position: relative; 
    *zoom: 1; 
    *margin-left: .3em; 
} 
.btn-group:before, 
.btn-group:after { 
    display: table; 
    content: ""; 
} 
.btn-group:after { clear: both } 
.btn-group:first-child { *margin-left: 0 } 
.btn-group + .btn-group { margin-left: 5px } 
.dropdown-btn-toolbar { 
    margin-top: 9px; 
    margin-bottom: 9px; 
} 
.dropdown-btn-toolbar .btn-group { 
    display: inline-block; 
    *display: inline; 
    /* IE7 inline-block hack */ 
    *zoom: 1; 
} 
.btn-group > .dropdown-btn { 
    position: relative; 
    float: left; 
    margin-left: -1px; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 
.btn-group > .dropdown-btn:first-child { 
    margin-left: 0; 
    -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 > .dropdown-btn:last-child, 
.btn-group > .dropdown-toggle { 
    -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; 
} 
.btn-group > .dropdown-btn.large:first-child { 
    margin-left: 0; 
    -webkit-border-top-left-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-left-radius: 6px; 
} 
.btn-group > .dropdown-btn.large:last-child, 
.btn-group > .large.dropdown-toggle { 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-radius-topright: 6px; 
    border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-bottomright: 6px; 
    border-bottom-right-radius: 6px; 
} 
.btn-group > .dropdown-btn:hover, 
.btn-group > .dropdown-btn:focus, 
.btn-group > .dropdown-btn:active, 
.btn-group > .dropdown-btn.active { z-index: 2 } 
.btn-group .dropdown-toggle:active, 
.btn-group.open .dropdown-toggle { outline: 0 } 
.btn-group > .dropdown-toggle { 
    padding-left: 8px; 
    padding-right: 8px; 
    -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 
    *padding-top: 4px; 
    *padding-bottom: 4px; 
} 
.btn-group > .dropdown-btn-mini.dropdown-toggle { 
    padding-left: 5px; 
    padding-right: 5px; 
} 
.btn-group > .dropdown-btn-small.dropdown-toggle { 
    *padding-top: 4px; 
    *padding-bottom: 4px; 
} 
.btn-group > .dropdown-btn-large.dropdown-toggle { 
    padding-left: 12px; 
    padding-right: 12px; 
} 
.btn-group.open .dropdown-toggle { 
    background-image: none; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); 
} 
.btn-group.open .dropdown-btn.dropdown-toggle { background-color: #e6e6e6 } 
.btn-group.open .dropdown-btn-primary.dropdown-toggle { background-color: #0055cc } 
.btn-group.open .dropdown-btn-warning.dropdown-toggle { background-color: #f89406 } 
.btn-group.open .dropdown-btn-danger.dropdown-toggle { background-color: #bd362f } 
.btn-group.open .dropdown-btn-success.dropdown-toggle { background-color: #51a351 } 
.btn-group.open .dropdown-btn-info.dropdown-toggle { background-color: #2f96b4 } 
.btn-group.open .dropdown-btn-inverse.dropdown-toggle { background-color: #222222 } 
.dropdown-btn .caret { 
    margin-top: 7px; 
    margin-left: 0; 
} 
.dropdown-btn:hover .caret, 
.open.btn-group .caret { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 
.dropdown-btn-mini .caret { margin-top: 5px } 
.dropdown-btn-small .caret { margin-top: 6px } 
.dropdown-btn-large .caret { 
    margin-top: 6px; 
    border-left-width: 5px; 
    border-right-width: 5px; 
    border-top-width: 5px; 
} 
.dropup .dropdown-btn-large .caret { 
    border-bottom: 5px solid #000000; 
    border-top: 0; 
} 
.dropdown-btn-primary .caret, 
.dropdown-btn-warning .caret, 
.dropdown-btn-danger .caret, 
.dropdown-btn-info .caret, 
.dropdown-btn-success .caret, 
.dropdown-btn-inverse .caret { 
    border-top-color: #ffffff; 
    border-bottom-color: #ffffff; 
    opacity: 0.75; 
    filter: alpha(opacity=75); 
} 

Live demo (jsfiddle)

Live demo (jsfiddle) updated

Live demo(jsfiddle) updated 2

PD: no intente la versión 3 ni 4 ...

+0

Ya he intentado este enfoque, pero rompe el diseño de barra de herramientas. Me gustaría que mis dos botones se unieran visualmente, como en [ejemplo de grupos de botones] (http://twitter.github.com/bootstrap/components.html#buttonGroups). Actualizaré mi pregunta para que quede más clara. –

+0

@SergeyKudriavtsev Actualizado, con mucho más estilo. Parece que se ajusta a tu descripción. – Sherbrow

+0

¡Genial! Justo lo que necesitaba. ¡Gracias! –

2

O usted podría agregar una clase CSS a los divs BTN-grupo y hacer esto en su lugar:

http://jsfiddle.net/plankmeister/JsPcg/

HTML:

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <div class="pull-left"> 
        <div class="btn-group btn-group-merge"> 
         <a class="btn" href="#" data-toggle="dropdown"><i class="icon icon-certificate"></i></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">One</a></li> 
          <li><a href="#">Two</a></li> 
          <li><a href="#">Three</a></li> 
         </ul>        
        </div> 
        <div class="btn-group btn-group-merge"> 
         <a class="btn" href="#" data-toggle="dropdown"><i class="icon icon-comment"></i></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">A B C</a></li> 
          <li><a href="#">D E F</a></li> 
          <li><a href="#">G H I</a></li> 
         </ul>        
        </div>       
       </div> 
      </div> 
     </div> 
    </div> 

CSS:

.navbar-fixed-top .btn-group-merge { 
     margin-left : -5px; 
    } 
    .navbar-fixed-top .btn-group-merge:first-child { 
     margin-left : 0; 
    } 
    .navbar-fixed-top .btn-group-merge .btn { 
     border-radius: 0 4px 4px 0; 
    } 
    .navbar-fixed-top .btn-group-merge:first-child .btn { 
     border-radius: 4px 0 0 4px; 
    } 

Esto funcionará con cualquier número de botones en el grupo de botones, pero solo el primero y el st se representará correctamente. Podría usar CSS-fu para arreglarlo, pero no se procesaría en IE < 10.

Cuestiones relacionadas