Memperbaiki tombol lebar dengan Bootstrap

Apakah Bootstrap mendukung tombol dengan lebar tetap? Saat ini jika saya memiliki 2 tombol, "Simpan" dan "Unduh", ukuran tombol berubah berdasarkan konten.

Juga apa cara yang benar untuk memperluas Bootstrap?

Anda juga dapat menggunakan .btn-blockkelas pada tombol, sehingga memperluas ke lebar induk.

Jika induk adalah elemen lebar tetap, tombol akan meluas untuk mengambil semua lebar. Anda dapat menerapkan markup yang ada ke wadah untuk memastikan tombol fix / fluid hanya mengambil ruang yang diperlukan.

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

Untuk melakukan ini, Anda dapat membuat lebar yang Anda rasa tidak masalah untuk kedua tombol dan kemudian membuat kelas khusus dengan lebar dan menambahkannya ke tombol Anda seperti:

CSS

.custom {
    width: 78px !important;
}

Saya kemudian dapat menggunakan kelas ini dan menambahkannya ke tombol seperti:

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

Anda dapat mengambil kelas khusus yang Anda buat dan menempatkannya di dalam stylesheet Anda sendiri, yang Anda muat setelah bootstrap stylesheet. Kami melakukan ini karena setiap perubahan yang Anda tempatkan di dalam bootstrap stylesheet mungkin hilang secara tidak sengaja ketika Anda memperbarui kerangka kerja, kami juga ingin perubahan Anda didahulukan dari nilai default.

Jika Anda meletakkan tombol di dalam div dengan kelas "btn-group", tombol di dalamnya akan meregang ke ukuran yang sama dengan tombol terbesar.

misalnya:

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

Grup Tombol Bootstrap

Untuk tombol Anda, Anda dapat membuat pemilih CSS lain untuk kelas-kelas tombol khusus dengan lebar minimum dan maksimum maks yang ditentukan. Jadi, jika tombol Anda

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

Dalam file CSS Bootstrap Anda, Anda dapat membuat sesuatu seperti

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

Dengan cara ini harus selalu tetap 80px bahkan jika Anda memiliki desain yang responsif.

Sejauh cara yang tepat untuk memperluas Bootstrap, Lihatlah thread ini:

Memperluas Bootstrap

Dengan BS 4, Anda juga dapat menggunakan ukuran , dan menerapkan w-100 sehingga tombol dapat menempati lebar kontainer induk lengkap.

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

Memperluas jawaban @ kravits88:

Ini akan meregangkan tombol agar sesuai dengan lebar keseluruhan:

<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 dan btn-group hanya berfungsi untuk konten statis tetapi tidak pada tombol yang dibuat secara dinamis, dan diperbaiki dengan tombol di css tidak praktis karena tetap pada lebar yang sama bahkan semua konten pendek.

Solusi saya: letakkan kelas yang sama ke grup tombol lalu loop ke semuanya, dapatkan lebar tombol terpanjang dan terapkan ke semua

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

Tombol lebar blok dapat dengan mudah menjadi tombol responsif jika wadah induk responsif. Saya pikir menggunakan kombinasi lebar tetap dan jalur pemilih yang lebih rinci, bukan! Penting karena:

1) Ini bukan retasan (pengaturan min-width dan max-width sama dengan retasan)

2) Tidak menggunakan tag! Penting yang merupakan praktik buruk

3) Menggunakan lebar sehingga akan sangat mudah dibaca dan siapa pun yang mengerti bagaimana cascading bekerja di CSS akan melihat apa yang terjadi (mungkin meninggalkan komentar CSS untuk ini?)

4) Gabungkan pemilih yang berlaku untuk simpul yang Anda targetkan untuk meningkatkan akurasi

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

Hanya datang pada kebutuhan yang sama dan tidak merasa puas dengan mendefinisikan lebar tetap.

Begitu juga dengan 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>

Cara terbaik untuk solusi masalah Anda adalah dengan menggunakan tombol btn-blok dengan lebar kolom yang diinginkan.

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

Di sini saya menemukan solusi dengan membandingkan tombol di elemen tombol-grup. Solusi sederhana adalah untuk mendapatkan yang memiliki lebar terbesar dan mengatur lebar ke tombol lainnya. Sehingga mereka dapat memiliki lebar yang sama.

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

Itu bekerja seperti pesona.

Ini mungkin solusi konyol, tapi saya mencari solusi untuk masalah ini dan malas.

Lagi pula, menggunakan input class = "btn ..." ... alih-alih tombol dan mengisi nilai = atribut dengan spasi sehingga mereka semua lebar yang sama berfungsi dengan baik.

misalnya:

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

Saya belum pernah menggunakan bootstrap selama itu, dan mungkin ada alasan bagus untuk tidak menggunakan pendekatan ini, tetapi saya pikir saya mungkin juga berbagi