webentwicklung-frage-antwort-db.com.de

twitter Bootstrap Box-Sizing hat mein Layout ruiniert

mein Layout war kaputt, als ich Bootstrap während der Hälfte meines Projekts implementierte. Das Problem wurde mit einigen CSS-Änderungen behoben

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

in bootstrap.css, wird sich dies auf den Kern auswirken? Ich möchte nur das Rastersystem in meinem Projekt verwenden.

22
Ulises Colen

Ja, mach das nicht. Wenn Sie den box-sizing: border-box entfernen, wird Ihr Raster zerstört. Siehe auch: Warum hat Bootstrap 3 auf Box-Sizing: border-box umgestellt?

Ein Beispiel, um zu zeigen, was passiert:

<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>

Mit:

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

Das oben genannte führt zu:

enter image description here

Mit box-sizing: border-box wird das Gutter-Konstrukt durch Auffüllen außerhalb der Berechnung der Spaltenbreite liegen.

Versuchen Sie, das Startraster von Bootstrap und den box-sizing: border-box zu verstehen, und finden Sie heraus, warum dies Ihr Layout ruiniert. Beheben Sie diese Probleme, oder erwägen Sie, Bootstrap für Ihr Projekt überhaupt nicht zu verwenden. 

10
Bass Jobsen

Ich habe das gleiche Problem und Bootstrap 3 zerstört meine vorhandenen Layouts und Widgets von Drittanbietern. Hier einige Dinge, die ich aus Gründen der zunehmenden Schwierigkeit und Stabilität ausprobiert habe.

Einfachster Weg

Sicher nur, wenn Sie keine anderen Bootstrap-Komponenten verwenden

Fügen Sie die folgende CSS hinzu, nachdem die Bootstrap-Datei geladen wurde:

*,
*: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;
}

Die Größenänderung von border-box wird nur für Elemente innerhalb des Grid-Systems verwendet. Dies funktioniert nicht, wenn Sie benutzerdefinierte Widgets im Raster haben, da sie border-box noch angewendet hätten.

Gezielterer Ansatz

Sicher nur, wenn Sie keine anderen Bootstrap-Komponenten verwenden

Alternativ können Sie jeder Spalte div eine benutzerdefinierte col-Klasse hinzufügen, auf die bereits ein col-*-* angewendet wurde:

<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>

Verwenden Sie dann stattdessen die folgende CSS:

*,
*: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;
}

Dies funktioniert gut, wenn Sie NUR das Bootstrap-Grid-System in Ihrem Projekt verwenden müssen. Wenn Sie jedoch andere Bootstrap-Komponenten verwenden möchten, empfehle ich diesen Ansatz ebenfalls nicht, da andere Bootstrap-Komponenten von der Einstellung von border-box abhängen.

Cherry-Pick jedes zu fixierende Element

Ein noch besserer Weg wäre es, die Box-Größenänderung als content-box für ein bestimmtes übergeordnetes Element für ein Widget wie folgt zu überschreiben:

.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;
}

Dieser Ansatz bietet die beste Vorwärtskompatibilität mit zukünftigen Bootstrap-Komponenten, auch wenn es jetzt scheinbar für Sie funktioniert.

55
user193130

Fügen Sie dies in Ihrem Mixin oder in den Variablen weniger hinzu und stellen Sie sicher, dass es nach scaffolding.less.__ geladen wird. Es setzt die Größe der bs3-Box zurück und wendet sie erneut auf bestimmte Elemente und alle erforderlichen BS3-Elemente an. Ich fand heraus, dass das meiste Durcheinander, das von der Standardgröße der BS3-Box erzeugt wird, ist, wenn es angewendet wird 

a,ul,li

Die Magie

* {
  .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);
}
3
Benn

Ich habe eine Kombination der oben genannten Lösungen verwendet, um meine Bedürfnisse zu erfüllen. (Ich habe nur das Rastersystem verwendet, alles andere war bereits vorhanden)

/* *,
*: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;
}

Das Gitter nahm zu viel Marge und Polsterung auf also habe ich alle ersetzt 

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

zu (Ich habe die Ränder auskommentiert)

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

und

.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;
}
0
Arun Prasad E S