Bootstrap缩略图在移动设备上太小 [英] Bootstrap thumbnails too small on mobile

问题描述

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

I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with 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>

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

I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:

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

    }
}

超过80像素，看起来像我只能设置宽度达到约80像素，任何更高的都不会做任何事情。

However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.

如果我离开缩略图，上述CSS代码在移动设备上显示的太小，我需要一种方法来增加移动设备上的缩略图大小。

If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.

这里是链接到网站：

推荐答案

更改 col-xs -6 到 col-xs-12

So instead of

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

您将有

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

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

This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.

这篇关于Bootstrap缩略图在移动设备上太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！