Wie man divs ohne Leerzeichen stapeln und die Reihenfolge auf kleineren Größen beibehalten kann - in Bootstrap
Ich weiß wirklich nicht, wie ich das in Worte fassen soll.
Wenn ich 2 divs in einer Reihe habe, hat jede eine andere Höhe, so dass die nächste Reihe unerwünschten Platz hat.
Aber richtig im kleinen Bildschirm stapeln.
%Vor% 
Aber wenn ich die Zeilen entferne und alle divs links in 1 div und alle rechts in 1 div platziere, gibt es kein Leerzeichen.
Aber sie stapeln in der falschen Reihenfolge auf einem kleinen Bildschirm.
%Vor% 
Beachten Sie, dass sie nicht nur 4 divs sind, sie sind mindestens 8.
Ich hoffe, das ist klar. Ich schätze jede Hilfe.
7 Antworten
Überarbeitete Antwort
Ich habe mit Hilfe dieser Antwort einen Code aussortiert Ссылка
Ich habe eine kleine Breite verwendet, um es zu demonstrieren, das heißt für Sie anzupassen. Fügen Sie auch Änderungen in css in einer site.css Datei, nicht Bootstrap und rufen Sie die site.css nach dem Bootstrap, so dass Änderungen überschrieben werden.
Css:
%Vor%Html:
%Vor%JQuery:
%Vor%Siehe Geige:
Erste Antwort
Über die Berechnung hinausgehende Berechnungen zur Bestimmung der individuellen div-Höhe und Anpassung der Ränder (nur für größere Layouts!); d. h.
div 1 Höhe = a, div 2 Höhe = b
div diff = (a-b)
falls diff & gt; 0
div 4 oberer Rand = -diff
else
div 3 oberer Rand = -diff;
Aber Sie müssten eine laufende Summe von ungeraden Div-Höhen und geradzahligen Div-Höhen behalten und entsprechend anpassen.
Ich habe die Breiten reduziert, um es zu testen. Sie müssen bei jedem 3. Div links löschen, um zu verhindern, dass es auf der rechten Seite platziert wird.
%Vor%Für jedes dritte div löschen links.
css:
%Vor% Wenn Sie für eine reine css-Lösung keine Bootstrap-Stile verwenden, können Sie display:flex :
Verwenden Sie den vollständigen Seitenlink im obigen Snippet, um zu sehen, wie sich die Stapelung zwischen verschiedenen Bildschirmgrößen ändert.
Aktualisieren
Am nächsten komme ich zu dem, was du bist:
Leider stapelt es die divs in Spalten von links zuerst und wird in den älteren Browsern nicht unterstützt:
Wenn Sie jquery hinzufügen könnten, könnte das vielleicht helfen. Sie könnten etwas hinzufügen wie:
%Vor% Hinzufügen der Klasse right zu divs rechts und der Klasse left zu divs auf der linken Seite. Dadurch werden beide Divs gleich groß.
Das einzige Problem könnte sein, dass Sie wahrscheinlich nicht dasselbe height wollen, wenn alle div's in derselben Spalte sind. Keine Ahnung, ob Sie einen jquery Code nur dann erstellen können, wenn die Fenstergröße & gt; etwas px (wahrscheinlich), aber Sie könnten height auf auto mit !important rechts media queries erzwingen. Nur meine 2 Cent.
Bearbeitet : hier dass Sie dieses Skript basierend auf einer maximalen Fenstergröße ausführen können:
%Vor%Als "R Lam" Oben gesagt, das funktioniert:
%Vor%Ich habe mich gefragt, ob es okay ist, wenn sie mehr als 12 ergeben, aber dann habe ich diese Frage gefunden: Fragenlink
Tatsächlich hat es nicht funktioniert, einige Leerzeichen erscheinen noch ..
Wir können es über @media queries
erreichenUnd du musst einen alternativen Float-Link rechts für divs hinzufügen
HTML:
%Vor%CSS:
%Vor%Es scheint mir, dass Sie möchten, dass Ihre div-Höhen dynamisch sind. Das bedeutet, dass alle divs innerhalb einer Zeile die Höhe des div mit mehr Inhalt haben müssen und die Höhe der divs daher von dem Inhalt abhängt, der variieren kann. Um das zu erreichen, brauchen Sie mehr als nur CSS, Sie brauchen etwas einfaches JQuery oder JavaScript. Verwenden von JQuery:
%Vor% Die Idee hier ist, die Funktion FixSizeOfRows() auszuführen, wenn Ihr letztes div vollständig geladen ist. Die Funktion FixSizeOfRows() führt zeilenweise die Höhe der Zeile in jedes ihrer untergeordneten divs ein (beachten Sie, dass die Zeilenhöhe mit dem untergeordneten div zunimmt, das mehr Inhalt hat).
Ich bevorzuge JQuery, wenn ich das DOM anstelle von normalem JavaScript manipuliere. Mit JavaScript könnten Sie etwas ähnliches, aber ein bisschen komplexer machen. Lassen Sie es mich wissen, wenn Sie mehr Klarheit darüber benötigen, wie dieser Code funktioniert.
Tags und Links html css twitter-bootstrap twitter-bootstrap-3