Bootstrap 3.0: Responsive-Spalte setzt den Abschnitt der Dokumentation zurück
Hey, so in der Bootstrap 3.0 Dokumentation, wenn Sie unter der Überschrift "Responsive column resets" schauen, sagt es folgendes:
"Bei den vier verfügbaren Gitterebenen treten Probleme auf, bei denen die Spalten an bestimmten Haltepunkten nicht ganz sauber sind, da die eine höher ist als die andere. Um das zu beheben, verwenden Sie eine Kombination aus a .clearfix und unsere Responsive Utility-Klassen. "
Was meinen sie damit? Ich dachte, dass Floats - basierend auf der Breite - gelöscht wurden oder nicht. Was fehlt mir hier?
1 Antwort
Ich glaube, das Beispiel auf Ссылка ist falsch und illustriert nicht das Problem.
Das Beispiel auf Ссылка veranschaulicht das Problem nicht visuell.
Ihre Spalten löschen nicht ganz richtig, da die eine höher ist als die andere
Beispiel ohne clearfix:
%Vor%Auf der extra kleinen (xs) mit der ersten Spalte (rot) höher als die zweite (blau) wird die dritte (grüne) Spalte float auf der rechten Seite der ersten Spalte.
ohne clearfix
mit clearfix
%Vor% 
col - * - 12
Das Problem tritt auch auf, wenn Sie mehr als 12 Spalten in einer Zeile hinzufügen, und eine dieser Zeilen sollte 100% (col - * - 12) sein.
Betrachten Sie diese Situation:
Auf den größeren Rastern möchten Sie:
%Vor% Auf dem xs-Raster möchten Sie: %Vor%Sie können das obige mit:
erreichen %Vor%Der rote Hintergrund zeigt Ihnen, dass die letzte Spalte die erste überlappt. Durch das Hinzufügen des Clearfix wird dieser Hintergrund entfernt:
%Vor%Die Ergebnisse:
Die erwähnte Überschneidung wird dadurch verursacht, dass die col-12-* Klassen keinen Float übrig haben, siehe auch: Ссылка
Auf Ссылка finden Sie eine andere Illustration. Diese Geige zeigt, wie der Clearfix das Problem lösen wird. Hinweis <div class="col-sm-3"> hier haben keine col-12-* . Auf dem xs-Gitter sind die Spalten standardmäßig 100% und haben keinen Gleitkommawert, so dass col-xs-12-* genauso wirkt wie nicht-Klasse auf dem xs-Gitter.
Tags und Links twitter-bootstrap twitter-bootstrap-3