Botones de ancho fijo con Bootstrap

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

¿Cuál es la forma correcta de extender Bootstrap?

También puede usar la .btn-blockclase en el botón, para que se expanda al ancho de los padres.

Si el elemento primario es un elemento de ancho fijo, el botón se expandirá para tomar todo el ancho. Puede aplicar el marcado existente al contenedor para asegurarse de que los botones fijos / fluidos ocupen solo el espacio requerido.

<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>

Para hacer esto, puede encontrar un ancho que considere correcto para ambos botones y luego crear una clase personalizada con el ancho y agregarlo a sus botones de la siguiente manera:

CSS

.custom {
    width: 78px !important;
}

Entonces puedo usar esta clase y agregarla 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>

Demostración: http://jsfiddle.net/yNsxU/

Puede tomar esa clase personalizada que cree y colocarla dentro de su propia hoja de estilo, que carga después de la hoja de estilo bootstrap. Hacemos esto porque cualquier cambio que coloque dentro de la hoja de estilo bootstrap podría perderse accidentalmente cuando actualice el marco, también queremos que sus cambios tengan prioridad sobre los valores predeterminados.

Si coloca sus botones dentro de un div con la clase "btn-group", los botones dentro se estirarán al mismo tamaño que el botón más grande.

p.ej:

<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 de Bootstrap

Para sus botones, puede crear otro selector CSS para esas clases especiales de botones con un ancho mínimo y un ancho máximo especificados. Entonces, si tu botón es

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

En su archivo CSS de Bootstrap puede crear algo como

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

De esta manera, siempre debe mantenerse a 80 píxeles, incluso si tiene un diseño receptivo.

En cuanto a la forma correcta de extender Bootstrap, eche un vistazo a este hilo:

Bootstrap extendido

Con BS 4, también puede usar el tamaño y aplicar w-100 para que el botón pueda ocupar el ancho completo del contenedor principal.

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

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

Ampliando @ kravits88 respuesta:

Esto estirará los botones para adaptarse a todo el ancho:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

btn-group-justified y btn-group solo funcionan para contenido estático pero no en botones creados dinámicamente, y arreglado con un botón en css no es práctico ya que permanece en el mismo ancho, incluso todo el contenido es corto.

Mi solución: poner la misma clase en un grupo de botones, luego hacer un bucle en todos ellos, obtener el ancho del botón más largo y aplicarlo a todos

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Un botón de ancho de bloque podría convertirse fácilmente en botón de respuesta si el contenedor principal responde. Creo que usar una combinación de ancho fijo y una ruta de selector más detallada en lugar de! Importante porque:

1) No es un truco (sin embargo, configurar el ancho mínimo y el ancho máximo es lo mismo)

2) No utiliza la etiqueta! Important, que es una mala práctica

3) Utiliza el ancho, por lo que será muy legible y cualquiera que entienda cómo funciona la cascada en CSS verá lo que está sucediendo (¿tal vez dejar un comentario CSS para esto?)

4) Combine sus selectores que se aplican a su nodo objetivo para una mayor precisión

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Acabo de encontrar la misma necesidad y no estaba satisfecho con la definición de ancho fijo.

Así lo hizo con jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

La mejor manera de resolver su problema es usar el bloque de botones btn-block con el ancho de columna deseado.

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


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Aquí encontré una solución comparando botones en un elemento de grupo de botones. La solución simple es obtener el que tenga el ancho más grande y establecer el ancho en los otros botones. Para que puedan tener el mismo ancho.

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

Funcionó a las mil maravillas.

Esta puede ser una solución tonta, pero estaba buscando una solución a este problema y me volví flojo.

De todos modos, usar input class = "btn ..." ... en lugar de button y rellenar el atributo value = con espacios para que todos tengan el mismo ancho funciona bastante bien.

p.ej :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

No he estado usando bootstrap durante tanto tiempo, y tal vez hay una buena razón para no usar este enfoque, pero pensé que podría compartir