[css] Bootstrap 3이 box-sizing : border-box로 전환 한 이유는 무엇입니까?

내 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이 모든 요소의 상자 크기를 테두리 상자로 전환하는 이유를 설명 할 수 있습니까? 나는 그것이 퍼센트 기반의 새로운 그리드 시스템과 관련이 있다고 생각하지만 위의 선택기는 그리드 요소에만 적용되는 것은 아닙니다.

약간 급진적 인 imho 같네요 🙂

누구든지 통찰력을 줄 관심이 있습니까?



답변

릴리스 정보는 다음을 알려줍니다. ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

기본적으로 더 나은 상자 모델. Bootstrap의 모든 것이 상자 크기 조정 : 테두리 상자,보다 쉬운 크기 조정 옵션 및 향상된 그리드 시스템을 제공합니다.

개인적으로 저는 대부분의 혜택이 그리드 시스템에 있다고 생각합니다. Twitter의 Bootstrap에서는 모든 그리드가 유동적입니다. 열은 전체 너비의 백분율로 정의됩니다. 그러나 거터의 너비는 픽셀 단위로 고정되어 있습니다. 기본적으로 열 양쪽의 패딩은 15px입니다. 픽셀 너비와 백분율의 조합은 복잡 할 수 있습니다. 로 border-box때문에이 계산 쉽다 border-box값 (컨텐츠 박스 기본 반대) 최종 렌더링 상자 선언 폭 만들고, 상자 안에 어떤 테두리와 패딩 컷. ( http://css-tricks.com/box-sizing/ )

또한 읽기 : http://www.paulirish.com/2012/box-sizing-border-box-ftw/


답변