Bootstrap Column Wrapping - Unregelmäßiges Verhalten

Question

Ich habe derzeit ein unregelmäßiges Spaltenumbruchverhalten mit Bootstrap. Einige Spalten, die in meiner Zeile enthalten sind, werden an den Anfang des Containers verschoben, im Gegensatz zum vorherigen Element.

Nach Bootstrap-Dokumentation:

Wenn mehr als 12 Spalten in einer einzelnen Reihe angeordnet sind, wobei jede Gruppe der zusätzlichen Spalten wird, als eine Einheit, wickelt auf eine neue Zeile.

Zum Beispiel habe ich:

<div class="container-fluid"> 

    <div class="row first"> 
    <div class="col-sm-6 col-md-3"> 
     Col 1 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 2 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 3 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 4 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 5 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 6 
    </div> 
    <div class="col-sm-12 col-md-4"> 
     Col 7 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Panel 
    </div> 
    </div> 
</div> 

Und die letzte Spalte verhält, was ich dachte, dass nach dem docs falsch. Wenn Sie die Größe des Ansichtsfensters im folgenden Beispiel ändern: here, können Sie sehen, dass die 7. Spalte für kleine Ansichtsfenster ein unregelmäßiges Verhalten aufweist. Die Spalte scheint die Breite/Höhe des Elternelements zu füllen.

Gibt es eine Out-of-the-Box-Möglichkeit, dies mit Bootstrap zu beheben? Fühle mich, als ob ich Markup übersehen würde, aber ich werde im Moment schielend ...

Answer 1

Ich denke, dein Problem hat damit zu tun, dass die Bootstrap-Klassen col-*-12 nicht floaten.

Sie können entweder einen float: left auf Ihre 7. Spalte mit col-sm-12 hinzufügen oder Sie können einen clearfix vor der Spalte nur sichtbar am Haltepunkt hinzufügen, wo es 12 (sm) wird.

wie folgt aus:

<div class="col-sm-6 col-md-4"> 
      Col 6 
     </div> 

     <div class="clearfix visible-sm"></div> 

     <div class="col-sm-12 col-md-4"> 
      Col 7 
     </div> 

Sie this fiddle

sehen können, aber dies sauberer sein könnte tun:

<div class="col-xs-12 col-md-4 pull-left"> 
     Col 7 
    </div> 

hier ist a demo dieser Lösung.

Beim Überladen von Zeilen kann es zu vielen Problemen kommen. Daher empfiehlt es sich, sie so oft wie möglich zu vermeiden und Dinge in .rows zu verpacken.