使移动设备上的旋转木马缩略图响应

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> 

我重写引导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>