html - Bootstrap 3.3.7 图像重叠

Question

我目前有像这样显示的图像 当我将窗口的宽度减小到大约 col-md 水平时，我希望 bootstrap 将其折叠成第一行的两个小狗图像和第二行的蓝色吃 bean 人。最后，当窗口宽度为智能手机的宽度时，它应该折叠成一张图片在另一张图片下方。

但是，当我的窗口高度达到 col-md 级别时，我得到了这个结果。 我该如何解决这个问题？

这是我的 HTML 那个区域的代码

<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/puppy.jpg">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/modified.png">
            <figcaption>A picture of the puppy with a jungle background</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/pacman_blue.png">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
    </div>
  </div>

Answer 1

<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/puppy.jpg" class="img-responsive">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/modified.png" class="img-responsive">
            <figcaption>A picture of the puppy with a jungle background</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/pacman_blue.png" class="img-responsive">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
    </div>
  </div>

给图片添加img-responsive class