Responsive Bilder Inline-Block in einem div mit Bootstrap

Question

Ich bin neu in Bootstrap, versuche ich dies reaktionsfähig zu tun: Ein Div, mit 3 Bildern zentriert (Bilder haben Display: Inline-Block-Eigenschaft).

Aber wenn ich anfange zu skalieren, in sm-Geräten, das dritte Bild zu einer neuen Zeile springen. Ich würde mir wünschen, dass in diesem Fall die drei Bilder reagieren, aber etwas funktioniert nicht. Mein HTML-Code:

<div class="row"> 
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center"> 
      <img src="img/img1.jpg" class="img-responsive inline-block" alt="Responsive image"/> 
      <img src="img/img2.jpg" class="img-responsive inline-block" alt="Responsive image"/> 
      <img src="img/img3.jpg" class="img-responsive inline-block" alt="Responsive image"/> 
    </div> 
</div> 

CSS:

.inline-block{ display: inline-block; } 
.center{ text-align: center; } 

Jeder Vorschlag bitte?

Answer 1

Im Fall von ansprechenden Bildern gehen würde, das Bild (n) benötigt einen einzelnen Behälter, der sie klas werden kann. In dem Beispiel, das Sie haben, gibt es drei Bilder in dem einen Container, so dass sie sich nicht individuell an diesen einzelnen Container anpassen. Sie könnten versuchen, so etwas wie:

.row li { 
 
    width: 33.3%; 
 
    float: left; 
 
} 
 

 
img { 
 
    border: 0 none; 
 
    display: inline-block; 
 
    height: auto; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

ich eher für width:100% statt class="img-responsive"