twitter bootstrap box-zaklejania zniszczony mój układ

Question

mój układ złamany kiedy wdrożyć bootstrap ciągu pół drodze mojego projektu, ustalona, ​​że ​​z pewnymi zmianami css, a ja wykomentowane to

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

w bootstrap.css , czy to wpłynie na jej rdzeń? Po prostu chcę użyć systemu siatki w moim projekcie.

Answer 1

Tak, nie rób tego. Usunięcie box-sizing: border-box zrujnuje twoją sieć. Zobacz także: Why did Bootstrap 3 switch to box-sizing: border-box?

przykładem pokazać, co się dzieje:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
    </div> 
</div> 
<br> 
<div class="container nonborderbox" style="background-color:lightblue;">  
    <div class="row" style="background-color:red;"> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
    </div> 
</div> 

Z:

.nonborderbox * 
{ 
-webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
     box-sizing: content-box; 
} 

Powyższe spowoduje:

Z box-sizing: border-box rynny skonstruuj przez paddin g zniknie z obliczania szerokości kolumny.

Spróbuj zrozumieć siatkę Bootstrapa i box-sizing: border-box i dowiedzieć się, dlaczego to zrujnuje twój układ. Napraw ten problem lub rozważ, że w ogóle nie użyjesz Bootstrapa do swojego projektu.

Answer 2

Mam ten sam problem i bootstrap 3 niszczy moje istniejące układy i widżety innych firm. Oto coś, co próbowałem w celu zwiększenia trudności i stabilności.

Najłatwiej

bezpieczne tylko wtedy, gdy nie korzystają inne składniki bootstrap

Dodaj następujący po css css bootstrap jest załadowany:

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

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

ten będzie korzystał z border-box Wymiarowanie tylko dla elementów w systemie siatki. To nie zadziała, jeśli masz niestandardowe widżety w siatce, ponieważ mają one nadal zastosowanie border-box.

bardziej ukierunkowane podejście

bezpieczne tylko wtedy, gdy nie korzystają inne składniki bootstrap

Alternatywnie, można dodać niestandardową klasę col do każdego div kolumny, które mają już col-*-* stosowane w taki sposób:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3 col">Grid still works</div> 
     <div class="col-md-9 col">:)</div> 
    </div> 
</div> 

Następnie kliknąć na poniższy css zamiast:

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

.container .row .col, 
.container .row .col:before, 
.container .row .col:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Działa to dobrze, jeśli TYLKO musisz użyć systemu siatki początkowej w projekcie. Jeśli jednak zamierzasz używać innych komponentów bootstrap, nie zalecam tego podejścia, ponieważ inne składniki ładowania początkowego zależą od ustawionego border-box.

Cherry-pick każdego elementu zawierającego naprawić

Jeszcze lepszym sposobem byłoby po prostu przesłonić okno-zaklejania jak content-box na konkretnego elementu nadrzędnego dla widgetu jak ten:

.your-custom-widget-class *, 
.your-custom-widget-class *:before, 
.your-custom-widget-class *:after { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
      box-sizing: content-box; 
} 

ten podejście zapewnia najlepszą kompatybilność z przyszłymi komponentami bootstrap, nawet jeśli wydaje się, że działa teraz.

Answer 3

Dodaj to do swoich mixin lub zmiennych mniej i upewnij się, że ładuje się po rusztowaniu. Bez opóźnień. Resetuje rozmiar bs3 box i stosuje go ponownie do określonych elementów i wszystkich wymaganych elementów BS3. Okazało się, że najbardziej bałagan stworzony przez rozmiaru domyślnej skrzynki BS3 jest, gdy jest on stosowany do

a,ul,li 

Magia

* { 
    .box-sizing(content-box); 
} 
form, 
div, 
img, 
table, 
th, 
tr, 
td, 
p, 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary, 
audio, 
canvas, 
progress, 
video, 
[class^="container-"], 
[class^="container-"] *, 
[class^="col-"], 
[class^="col-"] *, 
[class^="form-"], 
[class^="form-"] *, 
[class^="bg-"], 
[class^="bg-"] *, 
[class^="navbar"], 
[class^="navbar"] *, 
[class^="nav"], 
[class^="nav"] *, 
[class^="row"], 
[class^="row"] * { 
    .box-sizing(border-box); 
} 

Answer 4

użyłem kombinacji powyższych rozwiązań, aby dopasować moją potrzebę (użyłem tylko system siatki, wszystko inne było już istnieje)

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


[class^="container-"], 
[class^="container-"] *, 
[class^="col-"], 
[class^="col-"] *, 
[class^="row"], 
[class^="row"] * { 
    box-sizing:border-box; 
} 

siatka brał zbyt dużo margines i padding więc wymieniłem cały

padding-right:15px; 
padding-left:15px; 
margin-left=-15px; 
margin-right=-15px; 

do (I wykomentowane marginesie)

.row { 
/* margin-left: -15px; 
margin-right: -15px;*/ 
} 

i

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    position: relative; 
    min-height: 1px; 
    padding-left: 5px; 
    padding-right: 5px; 
}