Bootstrap: menús desplegables de múltiples botones que interfieren entre sí

Tengo el siguiente código: los menús desplegables de 3 botones están uno al lado del otro, cada uno con su propia identificación única. Sin embargo, al presionar el símbolo de intercalación en los 2 primeros no hace nada, mientras que al presionar el tercer símbolo de intercalación aparece el menú desplegable en el primero. ¿Por qué? ¿Me estoy perdiendo algo que agrega singularidad al Grupo de botones? ¿Un error en Bootstrap?

<div class="btn-group" id="all-sectors">
    <button class="btn btn-larger btn-primary title">All Sectors</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
            <li><a href="#" class="camera-filter" data-filter-type="North-Joe0">North-Joe0</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="East-Joe0">East-Joe0</a></li>
    </ul>
</div>

<div class="btn-group" id="all-grids">
    <button class="btn btn-larger btn-primary title">All Grids</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
    </ul>
</div>

<div class="btn-group" id="all-cameras">
    <button class="btn btn-larger btn-primary title">All Cameras</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
    </ul>
</div>

preguntado el 22 de mayo de 12 a las 20:05

Ellos trabajan muy bien para mí, jsfiddle.net/cLrYr -

Encontré el problema en mi código, pero todavía parece algo defectuoso por parte de Bootstrap. Hice que cada uno de los 3 grupos btn tuviera un float:left; en mi archivo CSS, y esa parece haber sido la causa del problema. Eliminar ese CSS hizo que funcionara de nuevo. -

si desea colocarlos uno al lado del otro, puede usar el .btn-toolbar clase de contenedor directamente desde el arranque. -

Sí, la barra de herramientas .btn hizo lo que estaba buscando. ¡Gracias! Lo agregaré como respuesta. -

1 Respuestas

El problema estaba en mi CSS. agregué un

float:left;

a cada grupo .btn que impidió que los dos primeros funcionaran correctamente. Debería haberlos envuelto en un

.btn-toolbar

envoltorio en su lugar.

contestado el 22 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.