Wie kann ich eine Reihe von 6 Bildern in Bootstrap-Spalten basierend auf der Bildschirmgröße neu positionieren?

Question

Bootstrap Neuling hier,

Ich habe eine Reihe von 6 Bildern in einer einzigen Zeile. Wenn ich die Größe des Bildschirms ändere, möchte ich, dass sie je nach der Größe des Bildschirms entweder in 2 Reihen zu 3 oder 3 Reihen zu 2 usw. gehen.

Soweit ich verstehe, gibt es eine Möglichkeit, dies mit Bootstrap zu tun?

Hier ist, was ich bisher: Eine einzeilige Klasse Eine Schleife iteriert durch alle in einem bestimmten Ordner gespeicherten Bilder Bilder in einen col-MD-2-Klasse

Vielen Dank im Voraus zu verfassen!

Answer 1

Sie können col-sm und col-xs verwenden, wenn Sie col-md-2 verwenden, um eine andere Anzeige basierend auf der Größe anzugeben.

Beispiel:

<div class="col-md-2 col-xs-6">image</div> 

In diesem Beispiel im mittleren Bildschirm wird Ihre div 2 Spalten nehmen und in extra klein wird es 6 Spalten nehmen.

Blick Bootstrap-doc sehen Größe entspricht, und jede Größe verfügbar

Answer 2

Versuchen Sie, diese Markup .....

figure img { 
 
    margin-bottom: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
 
     <figure> 
 
     <img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image"> 
 
     <figcaption> 
 

 
     </figcaption> 
 
     </figure> 
 
    </div> 
 

 

 

 

 

 
    </div> 
 
</div>