Hình ảnh đáp ứng inline-block trong div với Bootstrap

Question

Tôi mới trong Bootstrap, tôi đang cố gắng làm điều này đáp ứng: Một div, với 3 hình ảnh trung tâm (hình ảnh có hiển thị: inline-block propertie).

Nhưng khi tôi bắt đầu thay đổi kích thước, trong các thiết bị sm, hình ảnh thứ ba nhảy đến một dòng mới. Tôi muốn rằng trong trường hợp đó ba hình ảnh được đáp ứng, nhưng một cái gì đó không hoạt động. HTML code của tôi:

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

Bất kỳ đề nghị xin vui lòng?

Answer 1

Trong trường hợp các hình ảnh nhạy, hình ảnh (s) cần một container cá nhân mà họ có thể có kích thước vào. Trong ví dụ bạn có, có ba hình ảnh trong một vùng chứa, vì vậy chúng sẽ không thích ứng riêng lẻ với vùng chứa duy nhất đó. Bạn có thể thử một cái gì đó như:

.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

Tôi thà đi cho width:100% thay vì class="img-responsive"