Отзывчивые образы inline-block в div с Bootstrap

Я новичок в Bootstrap, я стараюсь сделать это отзывчиво: Div, с 3-мя изображениями с центром (изображения имеют отображение: inline-block propertie).

Но когда я начинаю изменять размер, в устройствах 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; }

Любое предложение пожалуйста?

Ответ 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>

Ответ 2

Я предпочитаю width:100% вместо class="img-responsive"