Saltar al contenido

¿Establecer el ancho de un grupo de botones al 100% y hacer que los botones tengan el mismo ancho?

Solución:

Bootstrap tiene el .btn-group-justified clase css.

La forma en que está estructurado se basa en el tipo de etiquetas que utiliza.

Con <a> etiquetas

<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
</div>

Con <button> etiquetas

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

No hay necesidad de CSS adicional .btn-group-justified la clase hace esto.

Debe agregar esto al elemento principal y luego envolver cada elemento btn en un div con .btn-group como este

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>

CORREA DE BOTAS 2 (fuente)

El problema es que no hay un ancho establecido en los botones. Prueba esto:

.btn {width:20%;}

EDITAR:

De forma predeterminada, los botones toman un ancho automático de la longitud del texto más algo de relleno, por lo que supongo que para su ejemplo probablemente sea más como un 14,5% para 5 botones (para compensar el relleno).

Nota:

Si no quiere intentar compensar el acolchado, puede utilizar box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *