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

Question

我有一个带有 4 个相关缩略图的轮播元素。它在台式机和平板电脑模式下看起来和工作正常，但是当我切换到 phone 时，我得到这个视图：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;
}

我试过调整 width 和 height 属性，但似乎没有任何效果。

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>

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

Make carousel thumbnails responsive in mobile

html

css

thumbnails

carousel

twitter-bootstrap