Soru Bootstrap düğmesi boyutları çalışmıyor?


İşte üç farklı düğme boyutu var:

<div class="btn-group btn-small">
    <button class="btn btn-small btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-small btn-danger" href="#" type="button">Deny</button>
</div>

<div class="btn-group">
    <a class="btn btn-mini btn-success" href="#">Approve</a>
    <a class="btn btn-mini btn-danger" href="#">Deny</a>
</div>

<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Bunların üçü de bunun sonucudur:

screenshot

Neden btn, btn-success, btn-danger ve btn-group tüm iş, ama btn-mini / küçük / etc?


35
2017-08-23 20:02


Menşei


Hangi Bootstrap sürümünü kullanıyorsunuz? - zongweil
3.0.0 dolgu macunu - Scott Beeson


Cevaplar:


Bootstrap, düğmelerinin isimlerini değiştirdi v2.3 için v3.0:

   2.3     -->   3.0  
.btn-large --> .btn-lg  
.btn-small --> .btn-sm  
.btn-mini  --> .btn-xs

İşte bir Tam Geçiş Kılavuzu Bootply'dan.

Yani güncellenmiş kodunuz şöyle görünmelidir:

<div class="btn-group">
    <a class="btn btn-xs btn-success" href="#">Approve</a>
    <a class="btn btn-xs btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-sm btn-success" href="#">Approve</a>
    <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

JsFiddle'ta çalışma demosu

Bunu üretecek:

screenshot


100
2017-08-23 20:11



Saçmalık, bu yüzden beni yönlendirdiğin için teşekkür ederim. getbootstrap.com/2.3.2/base-css.html#buttons Sanırım :( - Scott Beeson
Evet, tarihsel olarak bootstrap arayışında olan insanlar için popüler bir bağlantı oldu; şimdi çok değil. - KyleMit
Bu arada, şimdi harika çalışıyor ... elbette. :) - Scott Beeson
bazı şeyleri açıklıyor! - jeremyjjbrown


(Birisi neden buraya geldiğini merak ediyorsa btn-xs veya btn-group-xs 4.0 çalışmıyor

Bootstrap 3.0'dan 4.0'a değişiklikler:

576px ve altındaki küçük cihazlar için yeni bir ızgara katmanı ekledik (yeni   xs tier).

...

.Btn-xs sınıfını tamamen düşürdüm .btn-sm orantılı olarak çok   v3’ten daha küçük.

...

.Btn-group-xs sınıfının tamamı, .btn-xs'nin tamamen kaldırılmasını sağladı.

Kaynak


6
2017-12-29 22:57





Kullanıyorsanız, sınıfları değiştirmeniz gerekir. sürüm 3.0 

http://jsfiddle.net/WrQNh/1/

<div class="btn-group btn-small">
    <button class="btn btn-xs btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-xs btn-danger" href="#" type="button">Deny</button>
</div>
<br>
<div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a>
     <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group"> <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

5
2017-08-23 20:14





Ayrıca, bootstrap.css'nin kendi özelleştirilmiş * .css dosyanız tarafından geçersiz kılınmış olup olmadığından emin olun, çünkü .btn-sm .... mantığınız özelleştirilmiş * .css dosyanıza eklenmiştir. Bu benim durumumda ortaya çıktığında sorun oldu.


1
2017-10-31 00:43



Neden aşağı oy burada !? Birkaç kez Django ile bootstrap kullanırken bana da olan mantıklı bir nokta. - Benjamin
Bu garip. Diğer btn sınıflarının özelleştirilmesinin neden sizin durumunuzda olduğu gibi btn-xs (benim durumumda) veya btn-sm stillerini neden öldürdüğünü anlayamıyorum. - panhandel