Question

我有这个带有4个关联缩略图的轮播元素。它在桌面和平板电脑模式下看起来很好用，但是当我切换到手机时，我会看到这个视图：http://i.imgur.com/8tvXamd.png

我希望4个缩略图具有相同的大小并水平对齐。它们不一定具有相同的分辨率。

这是包含缩略图的ul：

<ul class="hide-bullets">

    <li class="col-sm-3 hidden-phone">
       <a class="thumbnail" id="carousel-selector-0"><img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></a>
    </li>

    <li class="col-sm-3">
       <a class="thumbnail" id="carousel-selector-1"><img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></a>
    </li>

    <li class="col-sm-3">
       <a class="thumbnail" id="carousel-selector-2"><img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></a>
    </li>

    <li class="col-sm-3">
       <a class="thumbnail" id="carousel-selector-3"><img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></a>
    </li>
</ul>

我已经覆盖了bootstrap CSS：

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    /*height: auto;*/
}

.thumbnail {
    padding: 0;
}

我尝试使用宽度和高度属性，但这似乎没有任何影响。

Answer 1

使用col-xs-3代替col-sm-3

<ul class="hide-bullets">
  <li class="col-sm-3 hidden-phone"> 
          <a class="thumbnail" id="carousel-selector-0"><img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></a> 
    </li>
    <li class="col-sm-3 col-xs-3"> 
           <a class="thumbnail" id="carousel-selector-1"><img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></a> 
    </li>
    <li class="col-sm-3 col-xs-3"> 
           <a class="thumbnail" id="carousel-selector-2"><img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></a> 
    </li>
    <li class="col-sm-3 col-xs-3"> 
      <a class="thumbnail" id="carousel-selector-3"><img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></a> 
    </li>
</ul>

使移动设备中的轮播缩略图响应

1 个答案: