移动设备上的引导缩略图太小

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 代码的情况下保留缩略图，它们在移动设备上显得太小，我需要一种方法来增加移动设备上缩略图的大小。 p>

这是该网站的link：

Answer 1

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

@media(max-width:767px){

.thumbnail > img {
    height:40px;

    }
}

Answer 2

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

所以不是

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

你会有

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

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