Dlaczego Bootstrap 3 przeszedł na box-size: border-box?

Migruję moje motywy Bootstrap z wersji 2.3.2 do wersji 3.0.0 i zauważyłem, że wiele wymiarów jest obliczanych inaczej, ze względu na następujące style w pliku bootstrap.css.

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

Czy ktoś może wyjaśnić, dlaczego Bootstrap zmienia rozmiar wszystkich elementów na border-box? Podejrzewam, że ma to związek z tym, że nowy system siatki jest oparty na procentach, ale powyższy selektor dotyczy oczywiście nie tylko elementów siatki.

Wydaje się trochę radykalne imho :-)

Czy ktoś chce dać wgląd?

— Alexander Rechsteiner
źródło

Dzięki za fragment kodu CSS; to jest dokładnie to, czego szukałem, aby zastosować to do projektu innego niż bootstrap. :)

— berto

Czy ktoś wie, dlaczego *: before i *: after są potrzebne?

— limscoder

@limscoder *:beforei *:aftersą potrzebne do tego modelu również zastosowanie do skrzynki :beforei :afterpseudo-elementów.

— buschtoens

Selektor * utrudnia programistom używanie content-box lub padding-box w innym miejscu CSS. Najlepszą praktyką przy rozpoczynaniu nowego projektu od zera jest html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

Informacje o wersji mówią: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Domyślnie lepszy model pudełkowy. Wszystko w Bootstrap ma rozmiary pudełkowe: pole graniczne, co zapewnia łatwiejsze opcje rozmiaru i ulepszony system siatki.

Osobiście uważam, że większość korzyści odnosi system gridowy. W Bootstrapie Twittera wszystkie siatki są płynne. Kolumny definiuje się jako procent całkowitej szerokości. Ale rynna ma stałą szerokość w pikselach. Domyślnie dopełnienie 15px po obu stronach kolumny. Połączenie szerokości w pikselach i procentach może być złożone. Dzięki border-boxtemu obliczenie jest łatwe, ponieważ border-boxwartość (w przeciwieństwie do domyślnej wartości pola treści) sprawia, że ostateczna renderowana ramka ma deklarowaną szerokość, a wszelkie obramowanie i wypełnienie wycięte wewnątrz ramki. ( http://css-tricks.com/box-sizing/ )

Przeczytaj również: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

— Bass Jobsen
źródło

Prosty przykład: spróbuj umieścić obramowanie o szerokości 1 piksela na elemencie div o szerokości 100%, używając content-box. Teraz masz coś, co wynosi 100% + 2 piksele. Dzięki border-box, nie ma tego problemu, jego nadal w 100%.

— emptywalls

Dobra dodatkowa dyskusja i uzasadnienie tego w tym numerze .

— yuvilio

Warto również zauważyć, że sprawdzone metody wdrażania rozmiaru pudełka zostały zaktualizowane, aby nie kolidować z bibliotekami innych firm. Nie jestem pewien, czy Bootstrap planuje aktualizację, ale powinni: css-tricks.com/…

— jbyrd

Osobiście nigdy nie zmieniałem modelu pudełkowego od czasu IE6. To była jedyna rzecz, którą IE znała lepiej. I tak, dzisiaj masz Calc (), aby obejść te problemy ze 100% plus 2 pikselami, ale droga samurajów ZAWSZE była ramką graniczną z dołączoną ramką i wypełnieniem. Tak wyobraża sobie pudełko w ludzkim mózgu. Uwielbiam widzieć ten „nowy trend”, mam dla nich powitalnego drinka.

— dkellner