Question

不是一个接一个地设置，而是通过减少屏幕图像拉伸不自然（并留在4列）。

我只用2张图片粘贴一段代码，因为否则stackoverflow阻止发布帖子。

提前致谢

 <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="viewport">
                    <a href="#">
                        <span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
                        <img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
                    </a>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="viewport">
                    <a href="#">
                        <span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
                        <img src="images/portfolio/image2.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
                    </a>
                </div>
            </div>    

        </div>
    </div>

Answer 1

使用class =＆＃34; img-responsive＆＃34;在img标签上。有关详细信息，请参阅doc

Answer 2

根据您的评论，如果您使用

<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" class="img-responsive" />

它将忽略第二个图像标记。而是使用：

<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item img-responsive" />

此外，您已经创建了列col-xs-3，这意味着它将是0px中的4列。要使图像在第一个（小）断点处向上100％宽度，请改用col-sm-3。

所以：

...
<div class="col-sm-3">
  <div class="viewport">
    <a href="#">
      <span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
      <img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
    </a>
  </div>
</div>
...

Bootstrap 3 - 包含4列图像的表格没有响应

2 个答案: