Question

我目前的图像显示如下当我将窗口的宽度减小到大约col-md级别时，我想让bootstrap将其折叠成第一行和蓝色的两个小狗图像pacman在第二排。最后，当窗口宽度是智能手机的宽度时，它应该折叠成另一个图像下面的一个图像。

然而，当我的窗口高度达到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类添加到图像

Answer 2

需要在下面使用css代码

searchTextView.translatesAutoresizingMaskIntoConstraints = false

或

img { max-width: 100%; }

Answer 3

首先，您需要在代码段中正确关闭代码。假设您正在使用 bootstrap 3 ，我添加了一些内联样式，以便在图片中显示。同时将img-responsive类添加到所有图像

img{
    margin:10;
    vertical-align:top;
    display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body style="background-color:grey;">
<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg"  class="img-responsive">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" 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="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-responsive">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
</body>

Bootstrap 4

将class="img-fluid"类添加到具有相同css的图像

img {
  margin: 10;
  vertical-align: top;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<body style="background-color:grey;">
  <div id="content" class="container">
    <div class="row">
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>Original picture of a puppy.</figcaption>
        </figure>
      </div>
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>A picture of the puppy with a jungle background</figcaption>
        </figure>
      </div>
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>Blue Pacman</figcaption>
        </figure>
      </div>
    </div>
  </div>
  <p>
    some text
  </p>
</body>

Answer 4

col-md-6和col-sm-12，想象一下窗口宽度的12个切片，并定义每个div如何表现以及要采取多少切片。

Answer 5

<div class="col-md-2 hidden-xs">
 <figure>
  <img src="../media/img/modified.png" class="img-responsive">
  <figcaption>A picture of the puppy with a jungle</figcaption>
 </figure>
</div>

Bootstrap 3.3.7图像重叠

5 个答案: