Korzystając z box-sizing: border-box z Twitter Bootstrap 2.x, możemy to zrobić z łatwością bez łamania wszystkiego?

Question

Używam "border-box box model" w moich ostatnich projektach. Ma to wiele zalet, których nie wyjaśnię tutaj. Ale możesz przeczytać o tym tutaj: Border-box in css-tricks

Teraz zaczynam większy projekt i zdecydowaliśmy, że twitter bootstrap będzie dobrym rozwiązaniem dla naszych potrzeb. Zastanawiałem się, czy da się to zrobić "na granicy", nie łamiąc wszystkiego. Czy ktokolwiek próbował tego i jakie są/byłyby konsekwencje? Zbyt wiele regulacji? prawdziwa poprawa?

Dziękuję

Answer 1

Tak.

Oto mixin można użyć w Bootstrap. Automatycznie doda wszystkie prefiksy dostawców.

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

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

Dane wejściowe nadal wymagają zawartości, w przeciwnym razie będą za małe.

Answer 2

To ogromnie ułatwia pracę z płynem/reagujących wzorów: istnieją pewne skomplikowane układy i przypadki, w których wymagane jest zgodny rozstaw że byłoby prawie niemożliwe bez użycia border-box.

I niedawno używany ten (FTW!):

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

na dość dużym terenie, a okazało się, że rzeczywiście rozwiązać wiele problemów. Jeśli potrzebujesz wsparcia dla IE7, moim podejściem było udostępnienie tej przeglądarce wersji o stałej szerokości strony i użycie this polyfill tylko w razie potrzeby. *

Naprawdę nie znalazłem żadnych wad - ulga to móc aby określić dwie kolumny o szerokości 50%, dodaj padding i wiedz, że to po prostu zadziała. W miejscach, w których możesz polegać na standardzie box-model, możesz zawsze powrócić do niego w przypadku określonych elementów.

Bootstrap specyficzne

Odnośnie korzystania Bootstrap konkretnie, można uruchomić w niektórych kwestiach - Proponuję testowanie go. Anegdotycznie, dodanie powyższego CSS do Bootstrap homepage nie wykazało żadnych problemów.

Główny system siatki wbudowane Bootstrap 2.x korzysta float i margin, więc zmieniając box-model będą miały żadnego wpływu na to (będzie tylko daje możliwość dodawania padding bezpośrednio do kolumn).

Bootstrap 3 przenosi się do podejścia mobilnego (i całkowicie upuszczając wsparcie dla IE7). Obejmuje to:

[A] Nowy system pojedynczej siatki (nadal używa .row) wykorzystuje szerokości procentowe, wypełnienie i box-sizing: border-box zamiast szerokości i marginesów pikseli.

Dlatego wyraźnie wierzą w korzyści płynące z zastosowania tego podejścia.

* Moje myślenie było to, że ja już opierając się na podkładki HTML w modernizr tak, że przeglądarka jest już uzależnione od JS na jego planie. Z SASS do przechowywania szerokości jako zmiennych, które działało dość sprawnie. To powiedziawszy, jeśli wykorzystanie dla starego IE jest wyższe dla każdego konkretnego projektu, to podejście staje się mniej odpowiednie.