Question

我发现了一些类似的问题，但没有一个能回答我所希望的。

我正在建立投资组合网站，我正在使用bootstrap 3，并希望我的div框在小/中/大时有三个图像，但在超小时只有两个图像。

我的图片html位于div喜欢这个

  <div class="row" id="artpieces">
     <div class="col-md-12 col-xs-12">
        CODE FOR THE IMAGES
     </div>
  </div>

到目前为止，我已经实现了三个图像的目标

#artpieces .col-md-12 img { width: 33%; }

我一直在尝试做类似

的事情

#artpieces .col-xs-12 img { width : 49.5%; }

但是当它变小时它不会进行切换。我觉得我犯了一个非常愚蠢的错误，但是无法抓住它。（我已经一次一个地使用更强力的方式测试了％s，它们确实显示了我想要的方式，但是当我尝试两种方式时它都不起作用。）

PS：这是我第一次建立一个网站，我正在学习/练习HTML和CSS。其中大部分进展顺利，但这是我无法解决的第一个真正的问题。

Answer 1

为什么不将每个图像放在带有col-md-12 col-xs-12类的div中？

HTML：

<div class="container">
    <div class="row" id="artpieces">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
        </div>
    </div>
</div>

现场演示： http://www.bootply.com/iy3Js8LV5X

不同屏幕的Bootstrap图像调整大小

1 个答案: