響應式圖像inline-block與div的div bootstrap

Question

我是新的Bootstrap，我試圖做到這一點：一個div，3圖像居中（圖像顯示：內聯塊性能）。

但是，當我開始調整大小，在sm設備中，第三個圖像跳轉到一個新行。在這種情況下，我希望這三張圖片是有反應的，但有些不起作用。我的HTML代碼：

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

任何建議嗎？

Answer 1

在響應圖像的情況下，圖像（S）需要，他們可以分級成一個單獨的容器中。在您的示例中，一個容器中有三個圖像，因此它們不會單獨適應該單個容器。你可以嘗試這樣的：

.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

我寧願去的width:100%代替class="img-responsive"