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

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

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

所以代替

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

你会有

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

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