Bootstrap-Spalten brechen sogar in Reihen und Containern

Question

Also ich baue eine Webseite mit Bootstrap 3 und einigen weniger Mixins.

Immer wenn ich versuche, ein zweispaltiges Layout zu erstellen, sagen Sie mit .make-sm-column(4); und .make-sm-column(8); die rechte Spalte immer überläuft die nächste Zeile.

Ich verstehe, dass für die padding-left und padding-right15px müssen Sie Ihre Spalten innerhalb einer Zeile und diese Zeile in einem Container sein. Auf einer grundlegenden Ebene, desto weniger bin ich mit sieht aus wie:

.container { 
    .container(); 
    //... 

    .content { 
    .make-row(); 

    .col1 { 
     .make-md-column(8); 
    } 

    .col2 { 
     .make-md-column(4); 
    } 
    } 
} 

noch aus irgendeinem Grund scheinen die Spalten zu breit für den Behälter zu sein und brechen über. Ist etwas offensichtlich, dass ich vermisse, dass ich nicht sehen kann? Meine einzige Lösung für jetzt ist, die padding-left/right zu entfernen, aber das ist hacky und natürlich entfernt diese Gosse nicht die beiden Spalten sauber nebeneinander aussehen, ohne dass ich zusätzliche Arbeit tun muss.

Answer 1

Wenn Sie das Padding entfernen, wird es behoben?

Es muss ein Problem mit der Box-Sizing sein. Durch das Auffüllen werden die Spalten größer als die angegebene Breite. Ändern Sie die Eigenschaft zu: box-sizing: border-box; und das sollte es tun.