JARVISFü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:
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
Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.