Mengapa Bootstrap 3 beralih ke box-sizing: border-box?

98

Saya memigrasi tema Bootstrap saya dari v2.3.2 ke v3.0.0 dan satu hal yang saya perhatikan adalah banyak dimensi dihitung secara berbeda, karena gaya berikut di bootstrap.css.

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

Adakah yang bisa menjelaskan mengapa Bootstrap mengubah ukuran kotak dari semua elemen menjadi kotak-batas? Saya menduga ini ada hubungannya dengan sistem grid baru yang berbasis persen, tetapi pemilih di atas jelas tidak hanya berlaku untuk elemen grid.

Sepertinya agak radikal imho :-)

Adakah yang peduli untuk memberikan wawasan?

css twitter-bootstrap twitter-bootstrap-3 boxsizer Alexander Rechsteiner
sumber
11
Terima kasih atas potongan CSS; itulah yang saya cari untuk menerapkan ini ke proyek non-bootstrap. :)
berto
Ada yang tahu kenapa *: before dan *: after dibutuhkan?
limscoder
2
@limscoder *:beforedan *:afterdiperlukan untuk juga menerapkan model kotak ini ke :beforedan :afterpseudo-elemen.
buschtoens
1
Pemilih * mempersulit pengembang untuk menggunakan kotak konten atau padding-box di tempat lain di CSS. Praktik terbaik saat memulai proyek baru dari awal adalah html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki

Jawaban:

102

Catatan rilis memberi tahu Anda: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Model kotak yang lebih baik secara default. Segala sesuatu di Bootstrap mendapatkan ukuran kotak: border-box, membuat opsi ukuran lebih mudah dan sistem grid yang ditingkatkan.

Secara pribadi saya pikir sebagian besar manfaat masuk ke sistem grid. Di Bootstrap Twitter, semua kisi berubah-ubah. Kolom ditentukan sebagai persentase dari total lebar. Tetapi talang memiliki lebar tetap dalam piksel. Secara default, padding 15px di kedua sisi kolom. Kombinasi lebar dalam piksel dan persentase bisa jadi rumit. Dengan border-boxpenghitungan ini mudah karena border-boxnilainya (sebagai lawan dari default kotak konten) membuat kotak yang dirender akhir menjadi lebar yang dinyatakan, dan batas dan bantalan apa pun dipotong di dalam kotak. ( http://css-tricks.com/box-sizing/ )

Baca juga: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Bass Jobsen
sumber
56
Contoh sederhana: Coba letakkan bingkai 1 piksel pada div lebar 100%, dengan content-box. Sekarang Anda memiliki sesuatu yang 100% + 2 piksel. Dengan border-box, Anda tidak memiliki masalah itu, masih 100%.
dinding
1
Pembahasan tambahan yang bagus dan pembenarannya dalam masalah ini .
yuvilio
1
Juga perlu diperhatikan penerapan ukuran kotak, praktik terbaik telah diperbarui agar tidak mengganggu pustaka pihak ke-3. Saya tidak yakin apakah Bootstrap berencana untuk memperbarui, tetapi mereka harus: css-tricks.com/…
jbyrd
2
Secara pribadi, saya tidak pernah mengubah model kotak sejak IE6. Itulah SATU-SATUNYA hal yang IE tahu lebih baik. Dan ya, hari ini Anda memiliki calc () untuk mengatasi masalah 100% plus 2 piksel itu, tetapi cara samurai SELALU menjadi border-box dengan border dan paddingnya disertakan. Begitulah cara otak manusia membayangkan sebuah kotak. Saya senang melihat "tren baru" ini, saya memiliki minuman selamat datang untuk mereka.
dkellner