ブートストラップのあるdivのインラインブロック

Question

私はブートストラップの新機能です。私はこれに応答しようとしています.3つの画像を中心とするdiv（画像は表示：インラインブロックのプロパティ）。

しかし、私がサイズ変更を始めると、smデバイスでは、3番目のイメージが新しい行にジャンプします。その場合、3つの画像は応答性がありますが、何かが機能していないことを確認したいと思います。私の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

class="img-responsive"のために行くだろうが、画像（複数可）、彼らがにな大きさにすることができる個々の容器を必要としています。あなたが持っている例では、1つのコンテナに3つのイメージがあるので、それらはその単一のコンテナに個別に適応しません。あなたのような何かを試みることができる：

.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%代わり