So erstellen Sie das Mauerwerk Effekte mit nur bootstrap 3 grid-system und css
Mein Problem ist, dass ich die Daten anzeigen wollen, in einem block-format mit der bootstrap 3 grid-system, jedoch möchte ich nicht das die lästigen whitespaces Lücken, das geschehen von der Höhe eingeschränkt auf die oben genannten Zeile. Zum Beispiel, Wenn ich tun:
<div class="row">
<div class="col-lg-4">post</div>
<div class="col-lg-4">longer post that is going to take more height than the others</div>
<div class="col-lg-4">post</div>
</div>
<div class="row">
<div class="col-lg-4">post</div>
<div class="col-lg-4">post</div>
<div class="col-lg-4">post</div>
</div>
dann habe ich mit der linken Leerraum zwischen zwei Zeilen, was ich versuche zu erreichen, ist eine Mauerwerk-Effekt (wo ein post füllen Sie sitzen in der Nähe der post darüber) mit nur mit CSS, Speziell das bootstrap 3 grid-system. I. E:
Ich weiß, das getan werden kann, mit plugins aber ich will sehen, ob noch einer mehr rein (auch wenn es hacky -) Lösung. Irgendwelche Ideen?
- sickdesigner.com/masonry-css-getting-awesome-with-css3
- Die Art und Weise, dass Aibrean schlägt und den link oben, legt das Kästchen in der Spalte Reihenfolge, nicht die box um, Mauerwerk und stellt Sie, wo immer Sie passen, und es ist nicht in Ordnung, aber es ist manchmal in der Nähe.
- Ich mochte die Verbindung, aber es nicht wirklich die bootstrap 3 grid-system, das ich zusammengestellt habe ein fiddle: jsfiddle.net/vtanz6xc/2, das funktioniert jedoch und verwendet die Spalte system immer noch, ich vermute, das wird jetzt funktionieren.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wir haben dies auf einer Website, und was wir Taten, war, setzen Sie das raster in den vertikalen Reihen.
Beispiel:
box
wahrsten Sinne des Wortes. Die "vertikale Zeilen" ist Spalten, außer ich nicht wollen, dass Sie denken, tatsächlich mit Spalten. Die Weise, die Sie denken, es zu tun ist über, wenn es zu fließen nach oben und unten. Du wirst auf jeden Fall müssen Sie Javascript für die Bestellung. Wir hatten uns einzurichten mit dem bootstrap grid-Klasse auf eine LI.In Bootstap
.row
element verwendet wird, für das clearing von floats des div-blocks /col es enthält (in Ihrem ex.col-lg-4
);Es ist also im Grunde nicht möglich, Elemente in unterschiedlichen Reihen nebeneinander stehen, die Sie unbedingt benötigen, ändern Sie die markup-Symbole;
Auf der anderen Seite mit bootstrap responsive column-system könnte hilfreich sein für eine CSS-Mauerwerk-Effekt:
Sie können versuchen, indem alle "col-Elemente", die Sie wollen, um das Mauerwerk Effekt auf innerhalb einer Zeile,
die Anzeige als inline-block(plus vielleicht einige andere kleine Veränderungen ..) sollte den trick tun (dies ist der Weg zu gehen für, wenn Sie stecken nur mit CSS..);
Abschließend
denken Sie daran, dass Mauerwerk geboren wurde und bleibt eine JavaScript-grid-layout-Bibliothek, so dass selbst wenn Sie es Arbeit mit CSS-ich schlage vor, Sie verwenden JS .
tausend Dank Desandro für diese tolle Idee;
In der Bootstrap-4 können Sie
.card-columns
finden Sie hier: https://v4-alpha.getbootstrap.com/components/card/Obwohl ich würde empfehlen, mit Isotop JS bietet mehr Kontrolle und bessere Verträglichkeit als mit CSS.
ich habe einen einfachen Mauerwerk Gitter, das Bilder von DB , die durch css so :