使移動設備上的旋轉木馬縮略圖響應

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>