Pulsanti a larghezza fissa con Bootstrap

Bootstrap supporta pulsanti a larghezza fissa? Attualmente se ho 2 pulsanti, "Salva" e "Scarica", la dimensione del pulsante cambia in base al contenuto.

Inoltre, qual è il modo giusto di estendere Bootstrap?

Puoi anche usare la .btn-blockclasse sul pulsante, in modo che si espanda alla larghezza del genitore.

Se l'elemento principale è un elemento a larghezza fissa, il pulsante si espanderà per assumere tutta la larghezza. È possibile applicare il markup esistente al contenitore per assicurarsi che i pulsanti fissi / fluidi occupino solo lo spazio richiesto.

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

Per fare questo puoi trovare una larghezza che ritieni sia ok per entrambi i pulsanti e quindi creare una classe personalizzata con la larghezza e aggiungerla ai tuoi pulsanti in questo modo:

CSS

.custom {
    width: 78px !important;
}

Posso quindi utilizzare questa classe e aggiungerla ai pulsanti in questo modo:

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

Puoi prendere quella classe personalizzata che crei e inserirla nel tuo foglio di stile, che carichi dopo il foglio di stile bootstrap. Lo facciamo perché eventuali modifiche apportate all'interno del foglio di stile bootstrap potrebbero andare perse accidentalmente durante l'aggiornamento del framework, inoltre vogliamo che le tue modifiche abbiano la precedenza sui valori predefiniti.

Se inserisci i tuoi pulsanti all'interno di un div con classe "btn-group" i pulsanti all'interno si allungheranno alla stessa dimensione del pulsante più grande.

per esempio:

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

Gruppi di pulsanti Bootstrap

Per i tuoi pulsanti, puoi creare un altro selettore CSS per quelle classi speciali di pulsanti con una larghezza minima e una larghezza massima specificate. Quindi se il tuo pulsante è

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

Nel tuo file CSS Bootstrap puoi creare qualcosa di simile

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

In questo modo dovrebbe rimanere sempre 80px anche se hai un design reattivo.

Per quanto riguarda il modo giusto di estendere Bootstrap, dai un'occhiata a questo thread:

Estensione del Bootstrap

Con BS 4, puoi anche usare il dimensionamento e applicare w-100 in modo che il pulsante possa occupare l'intera larghezza del contenitore padre.

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

Risposta in espansione @ kravits88:

Ciò allungherà i pulsanti per adattarli a tutta la larghezza:

<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 -ustificated e btn-group funzionano solo per contenuto statico ma non su pulsanti creati dinamicamente, e riparato con il pulsante in css non è pratico in quanto rimane sulla stessa larghezza anche se tutto il contenuto è breve.

La mia soluzione: metti la stessa classe nel gruppo di pulsanti, quindi esegui il loop a tutti, ottieni la larghezza del pulsante più lungo e applicala a tutti

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

Un pulsante di larghezza blocco potrebbe facilmente diventare pulsante di risposta se il contenitore padre è reattivo. Penso che usando una combinazione di una larghezza fissa e un percorso selettore più dettagliato invece di! Importante perché:

1) Non è un trucco (l'impostazione della larghezza minima e della larghezza massima uguali è comunque confusa)

2) Non usa il tag! Important che è una cattiva pratica

3) Utilizza la larghezza, quindi sarà molto leggibile e chiunque capisca come funziona il CSS in cascata vedrà cosa sta succedendo (forse lasciare un commento CSS per questo?)

4) Combina i selettori che si applicano al nodo target per una maggiore precisione

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

Si è appena imbattuto nella stessa necessità e non è stato saturato con la definizione di larghezza fissa.

Così è stato 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>

Il modo migliore per risolvere il problema è utilizzare il blocco pulsanti btn-block con la larghezza della colonna desiderata.

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

Qui ho trovato una soluzione confrontando i pulsanti in un elemento gruppo di pulsanti. La soluzione semplice è quella di ottenere quella con la larghezza maggiore e impostare la larghezza sugli altri pulsanti. Quindi possono avere una larghezza uguale.

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

Ha funzionato come un fascino.

Questa potrebbe essere una soluzione sciocca, ma stavo cercando una soluzione a questo problema e sono diventato pigro.

Ad ogni modo, usando input class = "btn ..." ... invece di button e riempire l'attributo value = con spazi in modo che abbiano tutti la stessa larghezza funziona abbastanza bene.

per esempio :

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

Non uso bootstrap da così tanto tempo, e forse c'è una buona ragione per non usare questo approccio, ma ho pensato che avrei potuto condividere