Mit Box-Sizing: Border-Box mit Twitter Bootstrap 2.x, können wir es einfach tun, ohne alles zu brechen?

Question

Ich habe das "Border-Box-Box-Modell" in meinen letzten Projekten verwendet. Das hat viele Vorteile, die ich hier nicht erklären werde. Aber Sie können hier darüber lesen: Border-box in css-tricks

Jetzt beginne ich ein größeres Projekt und wir haben entschieden, dass Twitter Bootstrap eine gute Lösung für unsere Bedürfnisse sein würde. Ich habe mich gefragt, ob es möglich ist, es "Border-Boxed" zu machen, ohne alles zu brechen. Hat jemand das versucht und was sind/wären die Konsequenzen? Zu viele Anpassungen? echte Verbesserung?

Danke

Answer 1

Ja.

Hier ist ein Mixin Sie können in Bootstrap verwenden. Es fügt automatisch alle Anbieterpräfixe hinzu.

*, *:before, *:after { 
    .box-sizing(border-box); 
} 

input { 
    .box-sizing(content-box); 
} 

Eingänge benötigen immer noch die content-box, sonst sind sie zu klein.

Answer 2

Es enorm vereinfacht mit Flüssigkeit/ansprechenden Design arbeiten: Es gibt einige komplexen Layouts und Fälle, in denen konsistenten Abstand erforderlich ist, die ohne Verwendung von border-box nahezu unmöglich wäre.

Ich habe dies (FTW!) vor kurzem verwendet:

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

auf einem ziemlich großen Grundstück, und fand es in der Tat eine Menge Probleme gelöst hat. Wenn Sie Unterstützung für IE7 benötigen, war mein Ansatz, diesen Browser eine Version mit fester Breite der Website zu liefern, und verwenden Sie nur wo erforderlich. *

Ich habe wirklich keine Nachteile gefunden - es ist eine Erleichterung zu können Um zwei Spalten mit 50% Breite anzugeben, fügen Sie padding hinzu und wissen, dass es einfach funktioniert. An Orten, an denen Sie sich auf den Standard box-model verlassen können, können Sie für bestimmte Elemente immer wieder darauf zurückgreifen.

Bootstrap spezifische

bezüglich der Verwendung von speziell Bootstrap, könnten Sie in einige Probleme laufen - ich würde vorschlagen, es heraus zu testen. Anekdotenweise ergab das Hinzufügen des obigen CSS in die Bootstrap homepage keine Probleme.

Das Hauptrastersystem in Bootstrap 2.x gebaut verwendet float und margin, so die box-model Veränderung auf, dass keine Auswirkungen haben (es wird Ihnen nur die Möglichkeit geben padding direkt zu Spalten hinzufügen).

Bootstrap 3 geht zu einem Mobile-First-Ansatz (und IE7-Unterstützung vollständig zu löschen). Dazu gehören:

[A] neues Single-Grid-System (verwendet immer noch .row) verwendet prozentuale Breite, Padding und box-sizing: border-box anstelle von Pixelbreiten und -rändern.

Sie glauben also eindeutig an die Vorteile dieses Ansatzes.

* Mein Denken war, dass ich schon in Modernizr, auf dem HTML-Shim verlasse mich so, dass Browser für das Layout bereits angewiesen auf JS ist. Mit SASS, um Breiten als Variablen zu speichern, hat dies ziemlich reibungslos funktioniert. Das heißt, wenn die Verwendung für alte IE für ein bestimmtes Projekt höher ist, wird dieser Ansatz weniger geeignet.