Question

我的网页上有一组Bootstrap缩略图，我已经使用类.img-responsive设置了所有图像。当我在移动浏览器上打开页面时，缩略图看起来太小了，我甚至无法用css调整它们的大小。

以下是我的缩略图：

  <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
        </a>
      </div>
... altogether 12 thumbnails 
    </div>

我尝试使用以下媒体查询编辑手机大小设备的缩略图大小：

@media(max-width:767px){
    .thumbnail > img { 
    height:70px;
    width:120px;

    }
}

然而宽度似乎没有超过80px，似乎我只能将宽度设置为大约80px，而任何更高的宽度都不会做任何事情。

如果我在不尝试上述CSS代码的情况下放弃缩略图，则它们在移动设备上看起来太小而且我需要一种方法来增加移动设备上缩略图的大小。

以下是该网站的link：

Answer 1

将col-xs-6更改为col-xs-12

所以而不是

  <div class="col-xs-6 col-md-3">

你会有

  <div class="col-xs-12 col-md-3">

这将使每个缩略图占据手机的整个宽度，而不是两个横跨。

Answer 2

我已经解决了这个问题，我发现我在CSS中的其他地方有以下代码，我没有注意到。以下媒体查询是我的图像在移动设备上显得如此之小的原因，我把它拿出来，现在图像显得很好。谢谢你的帮助。

@media(max-width:767px){

.thumbnail > img {
    height:40px;

    }
}

移动设备上的Bootstrap缩略图太小

2 个答案: