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

Posted 2023-03-29

【中文标题】使轮播缩略图在移动设备中响应

【英文标题】：Make carousel thumbnails responsive in mobile

【发布时间】：2018-01-22 05:16:27

【问题描述】：

我有这个带有 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 属性，但这似乎没有任何效果。

【参考方案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>