Html 使转盘缩略图在移动设备中具有响应性

我有这个旋转木马元素和4个相关的缩略图。它在台式机和平板电脑模式下外观良好，工作正常，但当我切换到手机时，我会看到以下视图：

我希望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>

---

我试着使用宽度和高度属性，但似乎并没有任何效果

使用

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>

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