เหตุใด Bootstrap 3 จึงเปลี่ยนไปใช้ box-sizing: border-box

Question 1

ฉันกำลังย้ายธีม Bootstrap ของฉันจาก v2.3.2 เป็น v3.0.0 และสิ่งหนึ่งที่ฉันสังเกตเห็นคือมิติข้อมูลจำนวนมากถูกคำนวณแตกต่างกันเนื่องจากสไตล์ต่อไปนี้ใน bootstrap.css

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

ใครช่วยอธิบายได้ไหมว่าทำไม Bootstrap ถึงเปลี่ยนขนาดกล่องขององค์ประกอบทั้งหมดเป็น border-box ฉันสงสัยว่ามันเกี่ยวข้องกับระบบกริดใหม่ที่เป็นเปอร์เซ็นต์ แต่ตัวเลือกด้านบนไม่ได้ใช้กับองค์ประกอบกริดเท่านั้น

ดูเหมือน imho ที่รุนแรงไปหน่อย :-)

ใครสนใจให้ข้อมูลเชิงลึกบ้าง?

Question 2

บันทึกประจำรุ่นบอกคุณ: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

โมเดลกล่องที่ดีขึ้นโดยค่าเริ่มต้น ทุกสิ่งใน Bootstrap ได้รับการปรับขนาดกล่อง: border-box ทำให้ตัวเลือกการปรับขนาดง่ายขึ้นและระบบกริดที่ปรับปรุงแล้ว

โดยส่วนตัวฉันคิดว่าผลประโยชน์ส่วนใหญ่ไปที่ระบบกริด ใน Bootstrap ของ Twitter กริดทั้งหมดเป็นของเหลว คอลัมน์ถูกกำหนดเป็นเปอร์เซ็นต์ของความกว้างทั้งหมด แต่รางน้ำมีความกว้างคงที่เป็นพิกเซล โดยค่าเริ่มต้นช่องว่าง 15px ทั้งสองด้านของคอลัมน์ การรวมกันของความกว้างเป็นพิกเซลและเปอร์เซ็นต์อาจซับซ้อน ด้วยborder-boxการคำนวณนี้เป็นเรื่องง่ายเนื่องจากborder-boxค่า (ตรงข้ามกับค่าเริ่มต้นของกล่องเนื้อหา) ทำให้กล่องที่แสดงผลขั้นสุดท้ายเป็นความกว้างที่ประกาศไว้และเส้นขอบและช่องว่างภายในกล่องจะถูกตัดออก ( http://css-tricks.com/box-sizing/ )

อ่านเพิ่มเติม: http://www.paulirish.com/2012/box-sizing-border-box-ftw/