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 같네요 :-)

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

— Alexander Rechsteiner
소스

CSS 스 니펫에 감사드립니다. 이것은 부트 스트랩이 아닌 프로젝트에 이것을 적용하기 위해 내가 찾던 것입니다. :)

— berto 2014-08-23

* : before 및 * : after가 필요한 이유를 아는 사람이 있습니까?

— limscoder 2014

@limscoder *:before와가 *:after에 필요한 또한이 박스 모델을 적용 :before하고 :after의사 요소.

— buschtoens

* 선택기는 개발자가 CSS의 다른 곳에서 콘텐츠 상자 또는 패딩 상자를 사용하기 어렵게 만듭니다. 처음부터 새로운 프로젝트를 시작하는 가장 좋은 방법입니다 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

릴리스 정보는 다음을 알려줍니다. ( 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/

— Bass Jobsen
소스

간단한 예 : 100 % 너비 div에 1 픽셀 테두리를 content-box. 이제 100 % + 2 픽셀의 무언가가 생겼습니다. 를 사용하면 border-box문제가 발생하지 않습니다. 여전히 100 %입니다.

— emptywalls

이 문제 에 대한 좋은 추가 논의와 정당화 .

— yuvilio

또한 타사 라이브러리를 방해하지 않도록 상자 크기 조정 구현 모범 사례가 업데이트되었습니다. 부트 스트랩이 업데이트 할 계획인지 확실하지 않지만 다음과 같이해야합니다. css-tricks.com/…

— jbyrd

개인적으로 IE6 이후로 박스 모델을 변경 한 적이 없습니다. IE가 더 잘 알고있는 유일한 것입니다. 그리고 예, 오늘은 100 % 더하기 2 픽셀 문제를 해결하기위한 calc ()가 있지만 사무라이의 방식은 항상 테두리와 패딩이 포함 된 테두리 상자였습니다. 그것이 인간의 뇌가 상자를 상상하는 방식입니다. 나는이 "새로운 트렌드"를보고 싶어한다. 나는 그들을위한 환영 음료를 가지고있다.

— dkellner