Duyarlı görüntülerle bir div içindeki inline bloğu Bootstrap ile

Question

Bootstrap'ta yeniyim, bunu yanıtlamaya çalışıyorum: 3 görüntülü bir div (resimlerde görüntü var: inline-block propertie). Yeniden boyutlandırmaya başladığımda, sm aygıtlarında, üçüncü görüntü yeni bir satıra atlar. Bu durumda, üç görüntünün duyarlı olduğunu, ancak bir şeyin işe yaramadığını istiyorum. Benim HTML kodu:

<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; } 

Herhangi bir öneri lütfen?

Answer 1

class="img-responsive" ait için giderdim, resim (ler) onlar içine büyüklükte olabilir bireysel bir konteyner gerekir. Sahip olduğunuz örnekte, bir kapta üç resim vardır, bu nedenle tek tek konteynere tek tek adapte olmazlar. Sen gibi bir şey deneyebilirsiniz:

.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

Daha doğrusu duyarlı görüntülerin durumunda width:100% yerine