Botões de largura fixa com Bootstrap

O Bootstrap suporta botões de largura fixa? Atualmente, se eu tiver 2 botões, "Salvar" e "Download", o tamanho do botão mudará com base no conteúdo.

Além disso, qual é a maneira correta de estender o Bootstrap?

Você também pode usar a .btn-blockclasse no botão, para que ela se expanda para a largura do pai.

Se o pai for um elemento de largura fixa, o botão será expandido para assumir toda a largura. Você pode aplicar a marcação existente ao contêiner para garantir que os botões fixo / fluido ocupem apenas o espaço necessário.

<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 fazer isso, você pode criar uma largura que considere adequada para os dois botões e, em seguida, criar uma classe personalizada com a largura e adicioná-la aos botões da seguinte forma:

CSS

.custom {
    width: 78px !important;
}

Posso usar essa classe e adicioná-la aos botões da seguinte forma:

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

Demonstração: http://jsfiddle.net/yNsxU/

Você pode pegar a classe personalizada criada e colocá-la dentro de sua própria folha de estilo, carregada após a folha de estilo de autoinicialização. Fazemos isso porque quaisquer alterações que você fizer dentro da folha de estilo de inicialização podem se perder acidentalmente ao atualizar a estrutura, também queremos que suas alterações tenham precedência sobre os valores padrão.

Se você colocar seus botões dentro de uma div com a classe "btn-group", os botões internos serão estendidos para o mesmo tamanho do botão maior.

por exemplo:

<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 Botões de Inicialização

Para seus botões, você pode criar outro seletor de CSS para essas classes especiais de botões com largura e largura mínimas especificadas. Então, se o seu botão estiver

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

No seu arquivo CSS do Bootstrap, você pode criar algo como

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

Dessa forma, ele deve permanecer sempre 80 pixels, mesmo se você tiver um design responsivo.

No que diz respeito à maneira correta de estender o Bootstrap, dê uma olhada neste tópico:

Estendendo o Bootstrap

Com o BS 4, você também pode usar o dimensionamento e aplicar w-100 para que o botão possa ocupar toda a largura do contêiner pai.

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

Expandindo a resposta @ kravits88:

Isso esticará os botões para caber na largura inteira:

<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 e btn-group funcionam apenas para conteúdo estático, mas não em botões criados dinamicamente, e fixado com o botão em css não é prático, pois permanece na mesma largura mesmo que todo o conteúdo seja curto.

Minha solução: coloque a mesma classe no grupo de botões e faça um loop em todos eles, obtenha a largura do botão mais longo e aplique-o a todos

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

Um botão de largura de bloco pode facilmente se tornar um botão responsivo se o contêiner pai for responsivo. Eu acho que usar uma combinação de uma largura fixa e um caminho do seletor mais detalhado em vez de! Importante porque:

1) Não é um hack (a configuração de largura mínima e largura máxima é a mesma, porém hacky)

2) Não usa a tag! Important, que é uma má prática

3) Utiliza largura, portanto, será muito legível e quem entender como a cascata funciona em CSS verá o que está acontecendo (talvez deixe um comentário em CSS para isso?)

4) Combine seus seletores que se aplicam ao nó de destino para aumentar a precisão

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

Acabou de chegar à mesma necessidade e não foi satisfeito com a definição de largura fixa.

O mesmo aconteceu com o 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>

A melhor maneira de solucionar o seu problema é usar o bloco de botões btn-block com a largura da coluna desejada.

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

Aqui encontrei uma solução comparando botões em um elemento de grupo de botões. A solução simples é obter o que tiver a maior largura e definir a largura para os outros botões. Então eles podem ter uma largura igual.

    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);
    });
}

Funcionou como um encanto.

Esta pode ser uma solução boba, mas eu estava procurando uma solução para esse problema e fiquei com preguiça.

De qualquer forma, usar input class = "btn ..." ... em vez de button e preencher o atributo value = com espaços para que eles tenham a mesma largura funcionam muito bem.

por exemplo :

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

Não uso o bootstrap há tanto tempo e talvez haja um bom motivo para não usar essa abordagem, mas achei que eu poderia compartilhar