Making 5 Bilder in 3 Spalten ausgerichtet

Question

Ich benutze Bootstrap.

Ich habe einen Container dann eine Zeile. Die Zeile enthält eine Liste von Bildern in einer Spalte-md-3. Die Zeile enthält eine Liste von Artikeln innerhalb eines col-md-9.

Wenn sich die Bilder an den oberen Bildschirmrand bewegen (weil der Bildschirm klein ist), sollen sie horizontal in so vielen Reihen wie nötig angezeigt werden. Wenn sich die Bilder auf der linken Seite des Bildschirms befinden, möchte ich, dass sie vertikal ausgerichtet sind.

Wie mache ich das?

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <img src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" width="170" height="50" border="0" alt="Coke"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" width="70" height="50" border="0" alt="Mcdonalds"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" width="180" height="50" border="0" alt="Hershey"> 
     <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" width="70" height="50" border="0" alt="Frito Lay"> 
     <img src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" width="90" height="50" border="0" alt="Levis"> 
     <img src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" width="100" height="50" border="0" alt="Black and Decker"> 
    </div> 
    <div class="col-md-9"> 
     <p>python prints alot of articles here</p> 
    </div> 
    </div> 

EDIT 1

Ich versuche, eine jsfiddle davon hier zu machen: https://jsfiddle.net/ced41zLy/

Answer 1

Zeile mit der Spalte erstellen und Ihre Haltepunkte gesetzt:

<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-xs-12 col-md-3"> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" alt="Coke"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" alt="Mcdonalds"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" alt="Hershey"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" alt="Frito Lay"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" alt="Levis"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" alt="Black and Decker"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-md-9"> 
 
     <p>python prints alot of articles here</p> 
 
    </div> 
 
    </div> 
 
</div>

Hinweis: Sie Bootstrap die verwenden können .img-responsive so, dass Sie nicht mit der Breite Aufhebens haben.