14

私は Bootstrap を初めて使用します。このレスポンシブを実行しようとしています: 3 つの画像を中央に配置した div (画像には display: inline-block プロパティがあります)。

しかし、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; }

何か提案はありますか？

4

2 に答える 2

16

レスポンシブ画像の場合、画像には、サイズを変更できる個別のコンテナーが必要です。あなたが持っている例では、1 つのコンテナーに 3 つのイメージがあるため、その 1 つのコンテナーに個別に適応することはありません。次のようなものを試すことができます：

.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>

于 2013-10-18T12:23:37.047 に答える
2

width:100%私はむしろ代わりに行きたいですclass="img-responsive"

于 2013-10-18T12:19:52.963 に答える