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

Question

我的网页上有一组 Bootstrap 缩略图，并且我已使用 class 设置了所有图像.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 代码，它们在移动设备上显得太小，我需要一种方法来仅增加移动设备上缩略图的大小。

这是该网站的链接：

Answer 1

改成col-xs-6​col-xs-12

所以而不是

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

你将会有

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

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