Warum hat Bootstrap 3 auf Box-Sizing: Border-Box umgestellt?

98

Ich migriere meine Bootstrap-Designs von Version 2.3.2 auf Version 3.0.0. Eine Sache, die mir aufgefallen ist, ist, dass viele Dimensionen aufgrund der folgenden Stile in bootstrap.css unterschiedlich berechnet werden.

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

Kann jemand erklären, warum Bootstrap die Boxgröße aller Elemente auf Border-Box umstellt? Ich vermute, es hat damit zu tun, dass das neue Rastersystem prozentual basiert, aber der obige Selektor gilt natürlich nicht nur für die Rasterelemente.

Scheint ein bisschen radikal imho :-)

Möchte jemand einen Einblick geben?

css twitter-bootstrap twitter-bootstrap-3 boxsizer Alexander Rechsteiner
quelle
11
Vielen Dank für das CSS-Snippet. Es ist genau das, wonach ich gesucht habe, um dies auf ein Nicht-Bootstrap-Projekt anzuwenden. :)
Berto
Weiß jemand warum die *: vorher und *: nachher benötigt werden?
Limscoder
2
@limscoder Die *:beforeund *:afterwerden benötigt, um dieses Box-Modell auch auf die :beforeund :afterPseudo-Elemente anzuwenden .
Buschtoens
1
Der * Selektor macht es Entwicklern schwer, Content-Box oder Padding-Box an anderer Stelle im CSS zu verwenden. Die beste Vorgehensweise beim Starten eines neuen Projekts von Grund auf ist html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki

Antworten:

102

In den Versionshinweisen heißt es: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Besseres Boxmodell standardmäßig. Alles in Bootstrap erhält eine Box-Größe: Border-Box, was einfachere Größenoptionen und ein erweitertes Rastersystem ermöglicht.

Persönlich denke ich, dass die meisten Vorteile dem Netzsystem zugute kommen. Im Bootstrap von Twitter sind alle Gitter flüssig. Spalten werden als Prozentsatz der Gesamtbreite definiert. Die Rinne hat jedoch eine feste Breite in Pixel. Standardmäßig ein Abstand von 15 Pixel auf beiden Seiten der Spalte. Die Kombination aus Breite in Pixel und Prozentsatz kann komplex sein. Mit border-boxdieser Berechnung ist einfach , da der border-boxWert (in Bezug auf das Inhalte-Feld Standardgegen) trifft die endgültige gerenderte Box erklärte Breite, und jede Grenze und padding Schnitt in der Box. ( http://css-tricks.com/box-sizing/ )

Lesen Sie auch: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Bass Jobsen
quelle
56
Einfaches Beispiel: Versuchen Sie, einen 1-Pixel-Rand auf ein 100% breites Div mit zu setzen content-box. Jetzt haben Sie etwas, das 100% + 2 Pixel ist. Mit border-boxhaben Sie dieses Problem nicht, es ist immer noch 100%.
leere Wände
1
Gute zusätzliche Diskussion und Begründung in dieser Ausgabe .
Yuvilio
1
Erwähnenswert ist auch, dass die Best Practice für die Implementierung der Box-Größe aktualisiert wurde, um die Bibliotheken von Drittanbietern nicht zu beeinträchtigen. Ich bin nicht sicher, ob Bootstrap ein Update plant, aber sie sollten: css-tricks.com/…
jbyrd
2
Persönlich habe ich das Box-Modell seit IE6 nie mehr geändert. Das war das EINZIGE, was IE besser wusste. Und ja, heute haben Sie calc (), um diese Probleme mit 100% plus 2 Pixel zu umgehen, aber der Weg des Samurai war IMMER der Rahmen mit Rand und Polsterung. So stellt sich das menschliche Gehirn eine Kiste vor. Ich liebe es, diesen "neuen Trend" zu sehen, ich habe ein Welcomeback-Getränk für sie.
dkellner