在bootstrap col中内联显示图像

Question

我正在使用Bootstrap 4 alpha 6，我想在线显示3个图像

__android_log_vprint()

我尝试了所有更改。屏幕和图像上的显示选项，我没有想法..

Answer 1

在响应式图像的情况下，图像需要一个可以调整大小的单个容器。在您的示例中，一个容器中有三个图像，因此它们不会单独适应该单个容器。你可以尝试类似的东西：

＆＃13;

＆＃13;

.row li {
  width: 33.3%;
  float: left;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;