Frage von Gokan, 17

thumbnail beim smartphone nicht nebeneinader warum?

Ich bastle eine Homepage für mich mit Fotos, es sollten ziemlich viele werden. Bei PC Bildschirm wird alles richtig angezeigt, sobald ich aber in Smartphone oder Tablet Auflösung Wechsel werden einige thumbnail nicht nebeneinander angezeigt, wo ist der hacken?

<div class="container">
<div class="row">
     <h1>Bootstrap 3 Lightbox using Modal</h1>

    <div class="row">
        <div class="col-xs-3"><a href="#" title="Image 1"><img src="//placehold.it/600x350" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 2"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 3"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 4"><img src="//placehold.it/600x350/992233" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 5"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 6"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 7"><img src="//placehold.it/600x350/777" class="thumbnail img-responsive"></a>
         <div class="col-xs-3"><a href="#" title="Image 8"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image9"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 10"><img src="//placehold.it/600x350/992233" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 12"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 13"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 14"><img src="//placehold.it/600x350/777" class="thumbnail img-responsive"></a>
        <div class="col-xs-3"><a href="#" title="Image 15"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 16"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 17"><img src="//placehold.it/600x350/992233" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-xs-3"><a href="#" title="Image 18"><img src="//pl       
Antwort
von Gokan, 16

css is

.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}

Antwort
von EightSix, 10

Das sieht nach Bootstrap aus. Dort gibt es nur 12 Spalten - ein div von dir weist du aber 3 zu. Ergibt 4 Spalten pro Zeile.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten