187 votos

Botones de ancho fijo con Bootstrap

¿Soporta Bootstrap botones de ancho fijo? Actualmente si tengo 2 botones, "Guardar" y "Descargar", el tamaño del botón cambia según el contenido.

Además, ¿cuál es la forma correcta de extender Bootstrap?

326voto

Kami Puntos 9721

También puedes usar el .btn-block clase en el botón, para que se expanda al ancho del padre.

Si el padre es un elemento de ancho fijo el botón se expandirá para tomar todo el ancho. Puede aplicar el marcado existente al contenedor para asegurar que los botones fijos/fluidos ocupen sólo el espacio necesario.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

71voto

Andres Ilich Puntos 41712

Para ello, puedes crear un ancho que te parezca adecuado para ambos botones y luego crear una clase personalizada con el ancho y añadirla a tus botones así:

CSS

.custom {
    width: 78px !important;
}

Entonces puedo usar esta clase y añadirla a los botones así:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

Demo: http://jsfiddle.net/yNsxU/

Puedes tomar esa clase personalizada que creas y colocarla dentro de tu propia hoja de estilo, que cargas después de la hoja de estilo de arranque. Hacemos esto porque cualquier cambio que coloques dentro de la hoja de estilos de bootstrap puede perderse accidentalmente cuando actualices el marco de trabajo, también queremos que tus cambios tengan prioridad sobre los valores predeterminados.

40voto

kravits88 Puntos 1307

Si colocas tus botones dentro de un buceador con la clase "btn-grupo" los botones del interior se estirarán hasta el mismo tamaño que el botón más grande.

Por ejemplo:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

Grupos de Botones Bootstrap

13voto

Marc B. Puntos 369

Para tus botones, puedes crear otro selector CSS para esas clases especiales de botones con un ancho mínimo y máximo especificado. Así que si tu botón es

<button class="save_button">Save</button>

En tu archivo CSS de Bootstrap puedes crear algo como

.save_button {
    min-width: 80px;
    max-width: 80px;
}

De esta manera siempre debe permanecer a 80px incluso si tienes un diseño sensible.

En cuanto a la forma correcta de extender Bootstrap, mira este hilo:

Extendiendo Bootstrap

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X