モバイルでカルーセルサムネイルを反応させる

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; 
} 

を何らかの効果があるようです。

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>