Bootstrap – Version 2.x – Imagegallery mit Versatz in neuer Zeile

Für eine Joomla 3.x Entwicklung, in der auch Bootsrap in Version 2.3.2 zum Einsatz kommt, habe ich eine Bildergallery mittels Bootstrap realisiert. Leider werden die Bilder, sofern sie dem Responsiv Webdesign entsprechen sollen ab der 2. Reihe horizontal versetzt angezeigt. Das sieht dann wie folgt aus:

Bootstrap - 2.x - Imagegallery

Bootstrap – 2.x – Imagegallery

Nach einiger Recherche im Netz bin ich auf eine Lösung gestoßen. Diese kommt in die CSS Datei und bewirgt die korrekte Ausrichtung der Bilder:


.row-fluid ul.thumbnails li.span12 + li { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; clear:left}
.row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span1:nth-child(12n + 13) { margin-left : 0px;clear:left }

Dies in das Template von z.B. Joomla und alle Zeilen sehen korrekt ausgerichtet aus. Mit Bootstrap ab Version 3.x soll dies behoben sein.

Link zum Beitrag: https://github.com/twbs/bootstrap/issues/3494

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.