Bootstrap 3 neden box-sizeing: border-box'a geçti?

Bootstrap temalarımı v2.3.2'den v3.0.0'a geçiriyorum ve fark ettiğim bir şey, bootstrap.css'deki aşağıdaki stiller nedeniyle birçok boyutun farklı şekilde hesaplandığı.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Bootstrap'in neden tüm öğelerin kutu boyutlandırmasını border-box olarak değiştirdiğini açıklayabilir mi? Yüzde tabanlı yeni ızgara sistemi ile ilgisi olduğundan şüpheleniyorum, ancak yukarıdaki seçici yalnızca ızgara unsurları için geçerli değil.

Biraz radikal gibi görünüyor :-)

Biraz fikir vermek isteyen var mı?

— Alexander Rechsteiner
kaynak

CSS pasajı için teşekkürler; bunu bootstrap olmayan bir projeye uygulamak için tam olarak aradığım şey buydu. :)

— berto

*: Öncesi ve *: sonrası neden gerekli olduğunu bilen var mı?

— limscoder

@limscoder *:beforeve *:afterbu kutu modelini :beforeve :aftersözde öğelerine de uygulamak için gereklidir .

— buschtoens

* Seçici, geliştiricilerin CSS'nin başka bir yerinde içerik kutusu veya dolgu kutusu kullanmasını zorlaştırır. Sıfırdan yeni bir projeye başlarken en iyi uygulama html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

Sürüm notları size şunu söyler: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Varsayılan olarak daha iyi kutu modeli. Bootstrap'teki her şey kutu boyutlandırması alır: kenarlık kutusu, daha kolay boyutlandırma seçenekleri ve gelişmiş bir ızgara sistemi.

Şahsen, faydaların çoğunun şebeke sistemine gittiğini düşünüyorum. Twitter'ın Bootstrap'ında tüm ızgaralar akıcıdır. Sütunlar, toplam genişliğin yüzdesi olarak tanımlanır. Ancak cilt payı piksel cinsinden sabit bir genişliğe sahiptir. Varsayılan olarak, sütunun her iki tarafında 15 piksellik bir dolgu. Piksel ve yüzde cinsinden genişlik kombinasyonu karmaşık olabilir. İle border-boxçünkü bu hesaplaması kolaydır border-boxdeğeri (içerik-kutusu varsayılan aksine) son render kutu bildirilen genişlik yapar ve kutunun içinde, herhangi bir sınır ve dolgu kesim. ( http://css-tricks.com/box-sizing/ )

Ayrıca şunu okuyun: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

— Bass Jobsen
kaynak

Basit örnek: ile% 100 genişlikte bir div üzerine 1 piksellik bir kenarlık koymayı deneyin content-box. Artık% 100 + 2 piksel olan bir şeye sahipsiniz. İle border-box, bu sorunun yok, hala% 100.

— emptywalls

Bu konuda iyi bir ek tartışma ve bunun gerekçelendirilmesi .

— yuvilio

Ayrıca, kutu boyutlandırma uygulamasının en iyi uygulamasının, üçüncü taraf kitaplıklara müdahale etmeyecek şekilde güncellendiğini de belirtmek gerekir. Bootstrap'in güncelleme yapmayı planlayıp

— jbyrd

Şahsen, IE6'dan beri kutu modelini hiç değiştirmedim. Bu, IE'nin daha iyi bildiği TEK şeydi. Ve evet, bugün% 100 artı 2 piksel problemlerinin etrafından dolaşmak için calc () var, ancak samurayın yolu HER ZAMAN sınırları ve dolgusu dahil sınır kutusu olmuştur. İnsan beyni bir kutuyu böyle hayal eder. Bu "yeni trendi" görmeyi seviyorum, onlara hoşgeldin içeceğim.

— dkellner