Zurb Foundation: Block Grid aktualisieren - zurb-foundation

Angenommen, ich habe 10 Blöcke in einem Gründung "Block Grid" (wo diese Blöcke gleichmäßig durch das Blockraster beabstandet sind) in 3 Spalten. Das gibt mir 3 Reihen von 3 Blöcken und 1 Reihe eines einzelnen Blocks.

Wenn ich eine Klasse dynamisch mit hinzufüge display:none um, sagen wir mal, blockiere zuerst, was ich bekommen würde, sind immer noch die gleichen 4 Reihen mit einem Loch anstelle von Block Nummer 1.

Gibt es eine Möglichkeit, sie zu zwingen, die Blöcke neu zu ordnen, als ob sie ursprünglich mit 9 begonnen hätten, wo du 3 Reihen mit je 3 Blöcken bekommen hättest?

BEARBEITEN:

Etwas später, nach meinem ersten Post, kam ich auf die Idee, einen Test durchzuführen, und es sieht aus wie ein Bug in Block Grid: Ich habe ein display:none Klasse zu einem LI innerhalb von UL, das von Anfang an von Block Grid im HTML-Code gesteuert wird und sicher, dass der Block, der nicht angezeigt werden soll, das Layout beeinflusst!

Es sieht so aus, als würde Foundation die LI zählen, die innerhalb des UL codiert sind, ohne ihre Anzeigeeigenschaften zu berücksichtigen. Im Beispiel oben, wenn ich den ersten Block (LI) auf gesetzt habe display:none Ich bekomme immer noch 4 Reihen mit der ersten Reihe, die nur 2 Blöcke zeigen!

Antworten:

1 für die Antwort № 1

Nach weiterer Suche fand ich heraus, dass Foundation gilt clear:both auf alle n + 1-ten Elemente im Block-Grid, unabhängig von der Sichtbarkeit des Elements. Wenn jedoch alle Elemente im Grid von gleicher Größe sind, wird das Löschen nichts ändern.

In meinem Fall sind zum Glück alle Elemente gleich groß, also durch Entfernen clear:both aus dem CSS (oder überschreiben mit clear:none !important;) löst meinen Fall. Dies ist jedoch keine Lösung, wenn die Elemente nicht die gleiche Größe haben. Ich habe auch gefunden Dies Das ist praktisch das gleiche Problem.


Am beliebtesten