Bootstrap ile sabit genişlik düğmeleri

Bootstrap sabit genişlik düğmelerini destekliyor mu? Şu anda 2 düğme, "Kaydet" ve "İndir" varsa, düğme boyutu içeriğe göre değişir.

Ayrıca Bootstrap'ı genişletmenin doğru yolu nedir?

.btn-blockSınıfı düğmedeki düğmeyi de kullanabilirsiniz , böylece üst öğenin genişliğine genişler.

Üst öğe sabit genişlikli bir öğeyse, düğme tüm genişliği alacak şekilde genişler. Sabit / sıvı düğmelerinin yalnızca gerekli alanı kapladığından emin olmak için kaba biçimlendirme uygulayabilirsiniz.

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

Bunu yapmak için, her iki düğme için de uygun olduğunu düşündüğünüz bir genişlik bulabilir ve daha sonra genişliğe sahip özel bir sınıf oluşturabilir ve düğmelerinize aşağıdaki gibi ekleyebilirsiniz:

CSS

.custom {
    width: 78px !important;
}

Daha sonra bu sınıfı kullanmak ve düğmeler gibi ekleyebilirsiniz:

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

Oluşturduğunuz bu özel sınıfı alabilir ve önyükleme stil sayfasından sonra yüklediğiniz kendi stil sayfanıza yerleştirebilirsiniz. Bunu, çerçeveyi güncellediğinizde bootstrap stil sayfasında yaptığınız herhangi bir değişiklik yanlışlıkla kaybolabileceğinden, değişikliklerinizin varsayılan değerlere göre öncelik kazanmasını istiyoruz.

Düğmelerinizi "btn-group" sınıfındaki bir div içine yerleştirirseniz, içindeki düğmeler en büyük düğmeyle aynı boyuta getirilir.

Örneğin:

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

Bootstrap Düğme Grupları

Düğmeleriniz için, belirtilen minimum genişlik ve maksimum genişlikteki özel düğme sınıfları için başka bir CSS seçici oluşturabilirsiniz. Yani düğmeniz

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

Bootstrap CSS dosyanızda şöyle bir şey oluşturabilirsiniz

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

Bu şekilde, duyarlı bir tasarımınız olsa bile daima 80 piksel kalması gerekir.

Bootstrap'ı genişletmenin doğru yolu olduğu gibi, bu konuya bir göz atın:

Bootstrap'i Genişletme

BS 4 ile boyutlandırmayı kullanabilir ve düğmenin ana kabın tüm genişliğini kaplayabilmesi için w-100 uygulayabilirsiniz.

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

@ Kravits88 cevabını genişletmek:

Bu, düğmeleri tüm genişliğe uyacak şekilde uzatır:

<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-grubu-yaslanmış ve btn-grubu yalnızca statik içerik için çalışır, ancak dinamik olarak oluşturulmuş düğmelerde çalışmaz ve css'deki düğmeyle sabitlenen, tüm içerik kısa olsa bile aynı genişlikte kaldığı için pratik değildir.

Benim çözümüm: aynı sınıfı düğme grubuna koy, sonra hepsine döngü yap, en uzun düğmenin genişliğini al ve hepsini uygula

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

Ana konteyner yanıt veriyorsa, bir blok genişliği düğmesi kolayca yanıt verebilir. Bence yerine sabit genişlik ve daha ayrıntılı bir seçim yolu kombinasyonu kullanarak düşünüyorum:

1) Onun bir kesmek değil (ancak min-genişlik ve maksimum genişlik ayarı aynıdır, ancak hacky)

2) Kötü uygulama olan! Önemli etiketi kullanmaz

3) Genişliği kullanır, bu nedenle çok okunabilir olacak ve CSS'de basamaklı çalışmanın nasıl çalıştığını anlayan herkes neler olduğunu görecektir (belki bunun için bir CSS yorumu bırakabilir misiniz?)

4) Daha fazla doğruluk için hedeflediğiniz düğüm için geçerli olan seçicilerinizi birleştirin

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

Sadece aynı ihtiyaç geldi ve sabit genişlik tanımlanması ile satified değildi.

Bunu jquery ile mi yaptı:

    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>

Sorununuzun çözümünün en iyi yolu, btn-block düğme bloğunu istenen sütun genişliğiyle kullanmaktır.

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

Burada bir düğme grubu öğesindeki düğmeleri karşılaştırarak bir çözüm buldum. Basit çözüm, en geniş genişliğe sahip olanı elde etmek ve genişliği diğer düğmelere ayarlamaktır. Böylece eşit genişliğe sahip olabilirler.

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

Bir cazibe gibi çalıştı.

Bu aptalca bir çözüm olabilir, ama bu soruna bir çözüm arıyordum ve tembelleştim.

Her neyse, giriş sınıfı = "btn ..." ... yerine düğme kullanmak ve value = özniteliğini boşluklarla doldurmak, böylece aynı genişlikte olmaları oldukça iyi çalışıyor.

Örneğin :

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

Bu kadar uzun süredir bootstrap kullanmıyorum ve belki de bu yaklaşımı kullanmamak için iyi bir neden var, ama paylaşabileceğimi düşündüm