Ayuda en la programación, respuestas a preguntas / Twitter bootstrap El grupo Bootstrap Button actúa de forma independiente: twitter-bootstrap, twitter-bootstrap-3

El grupo Bootstrap Button actúa de forma independiente: twitter-bootstrap, twitter-bootstrap-3

Tengo una barra de botones en mi página web hecha con bootstrap.

Tengo un conjunto de 3 botones luego dos. Los tres primeros deben ser independientes. Es decir, puedo seleccionar uno, dos o tres de ellos. El segundo conjunto de dos funciona según sea necesario y si se selecciona uno, el otro no.

La funcionalidad de los tres primeros no funciona y no estoy seguro de por qué. Están en grupos de botones separados con diferentes id.

¿Algunas ideas? Aquí está el código:

<div class="row" style="margin-top: -4px;">
<div class="col-xs-9" style="padding-right: 0px;">
<div class="col-xs-4" style="padding: 0px;">
<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Open now</button>
</div>
</div>
</div>
<div class="col-xs-4" style="padding: 0px;">
<div id="freeOnlyBtn" class="btn-group btn-group-justified" role="group" aria-label="2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Free only</button>
</div>
</div>
</div>
<div class="col-xs-4" style="padding: 0px;">
<div id="18PlusBtn" class="btn-group btn-group-justified" role="group" aria-label="3">

<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">18+</button>
</div>
</div>
</div>
</div>
<div class="col-xs-3" style="padding-left: 0px;">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-info"><i class="fa fa-th" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-info"><i class="fa fa-list" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
</div>
</div>
</div>

Respuestas

1 para la respuesta № 1

Puedes hacerlo usando: casillas de verificación para multiples, y entradas de radio para soltero

<div class="container-fluid">
<div class="col-xs-9">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked>Open now</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">Free only</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">+18</label>
</div>
</div>
<div class="col-xs-3">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option2" autocomplete="off">On</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" autocomplete="off">Off</label>
</div>
</div>
</div>

0 para la respuesta № 2

¿qué tal esto? Reemplace el texto que se muestra en los botones con una casilla de verificación como esta:

De:

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Open now</button>
</div>
</div>

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1"  data-toggle="buttons">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">
<input type="checkbox" autocomplete="off" checked>Display Text
</button>
</div>
</div>

¡Trabajó para mi!