Hallo, brauche für meinen neuen Shop auf der Startseite, 5 Bilder nebeneinander. Diese sollen sich responsive verhalten, also auf der Desktopansicht nebeneinander bleiben, auf der Tabletansicht ebenfalls und auf Smartphone untereinander angeordnet sein. Die html-Codes mit 3 Bildern, wie hier im Forum bereits ausführlich behandelt, funktionieren nicht. Bild, wie es aussehen soll in der Desktopansicht habe ich angehängt. Wäre Dankbar für einen Code. Lieben Dank für die Hilfe im voraus...
5 geht nicht... die Seite besteht aus 12 Spalten und 12 kann man nicht durch 5 teilen... Schau dir mal die beiden Testshops an.
Hallo Rene, erstmal herzlichen Dank vorab. 3 Bilder funktionieren ja. Habe ich auch mit folgendem Code gelöst: <div class="row space-1"> <div class="col-xs-12 col-sm-4"> <br /> <a href="/hier der erste Link/"><img class="img-responsive" src="images/hier das erste Bild" /></a> </div> <div class="col-xs-12 col-sm-4"> <br /> <a href="/hier der zweite Link/"><img class="img-responsive" src="images/hier das zweite Bild" /></a> </div> <div class="col-xs-12 col-sm-4"> <br /> <a href="/hier der dritte Link/"><img class="img-responsive" src="images/hier das dritte Bild" /></a> </div> </div> Dann müsste ja theoretisch 6 Bilder nebeneinander (geht bei mir auch), ebenfalls funktionieren, oder?
versuch es doch einfach mal... für solche Experimente hat man immer eine Spielwiese (Kopie vom Shop)... da kann man nichts kaputt machen...
6 Bilder sollte damit gehen HTML: <div class="row"> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> </div> Schau dir dazu auch mal das an http://holdirbootstrap.de/css/#grid-example-basic
Könnte funktionieren . Habe es gerade versucht, jedoch weiss ich nicht genau, wo ich meinen Bildcode einfüge (<img class="img-responsive" src="images/Bild" />. Danke nochmal im voraus
HTML: <div class="row"> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive" src="images/Bild" /></div> </div>
Super, super, super. Danke. Das funktioniert ja auch mit 5 Bildern. Letzte Frage : Stelle ich z.B. das Tablet auf Hochformat, liegen die Bilder dann links. Kann man die auch zentrieren? Herzlichen Dank im voraus
HTML: <div class="row"> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> <div class="col-md-2"><img class="img-responsive center-block" src="images/Bild" /></div> </div>
Hallo Kai, ich habe das bei mir probiert im Testshop und es funktioniert. Da ich aber relativ große Bilder habe, die nebeneinander gut aussehen, schaut es aber im Handymodus zu groß aus, das ganze Display ist ausgefüllt untereinander. Gibt es eine Möglichkeit mit @media im Handymodus unter 1000px senkrecht kleinere Formate zu setzen, so etwa 75% der Displaybreite? Oder Alternativ 2 Bilder nebeneinander und 3 untereinander (ich habe 6 Bilder) Danke und Gruß Peru
Schau dir mal das an http://holdirbootstrap.de/css/#grid füge mal überall bei den class=" noch das col-xs-6 dazu, dann hast du 2 Bilder auf dem Handy nebeneinander
das folgende kann man sich im Quellcode der Versand- & Zahlungsbedingungen Übersicht im Testshop 2 anschauen... <div class="hidden-xs"> zeigt den Inhalt vom DIV Container auf der PC Ansicht an und mit hidden-sm bzw. hidden-md bzw. hidden-lg kannst du die mobilen Ansichten steuern... somit kannst du versch. Bilder und Spalten Einteilungen auf versch. Auflösungen beeinflussen...
Boah, Danke an Euch! Ich muss mir echt mal das Bootstrap zu Gemüte führen. Jetzt habe ich schon aus euren Antworten ableiten können, das im Tabletmodus mit col-sm-4 2 Reihen je 3 Bilder kommen. Somit wird das klickem mit Touchscreens nicht so fuddelig. Ein Problemchen hab ich aber damit, mit col-xs-6 und col-sm-4: Die nächste Reihe klebt an der oberen Reihe. Gibt es die Möglichkeit im xs und sm einen break zwischen den Reihen zu machen zu machen, bzw einen 20px Abstand ohne einen Vertikal-Abstand bei den Bildern zu setzen, was ja auch gehen würde?? Hab jetzt mal einen Vertical-Anstand gesetzt, klappt. Danke und Gruß
Kai und Rene - ihr habt mich glücklich gemacht Jetzt weiss ich, wie ich verschiedene Bilder für verschiedene Auflösungen ein- und ausblenden kann, mit visible und hidden. Es hat mich immer geärgert, das auf dem Desktop ein Banner super aussieht, aber um so kleiner die Auflösung wurde, das Responsive den Banner immer kleiner gemacht hat, das man ihn auf dem Handy nicht mehr lesen kann. Jetzt einfach einen neuen passenden Banner kreiert, und bei 992 schaltet es um zwischen den Auflösungen von breitem Banner für breite Monitore, und schmalem Banner für schmale Monitore, mit hidden und visible. Und wenn ich viel Lust habe, dann mache ich einen noch kleineren Banner für xs. Aber warum erzähle ich euch das, ihr kennt das ja schon...