html - 图片推荐轮播

Question

我正在开发一个网站。

我用过推荐轮播，我用这个 tutorial

                <div class="col-md-12" data-wow-delay="0.2s">
                    <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                        <!-- Bottom Carousel Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
                            </li>
                            <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
                            </li>
                            <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
                            </li>
                        </ol>

但我有一个问题，旋转木马中的图像在移动屏幕中改变位置。我试图清除图像类: img-responsive ，但没有效果。如何让图片无响应？？

Answer 1

在给定的教程链接中，缩略图与内容区域重叠，因为它设置了 position: absolute; 在媒体查询中应该是 position: relative;这是引用类:

@media (max-width: 767px) {
 .carousel-indicators {
   position: relative;
   bottom: 10px;
   left: 50%;
   z-index: 15;
   width: 60%;
   padding-left: 0;
   margin-left: -30%;
   text-align: center;
   list-style: none;
 }
}

在给定的教程中，#quote-carousel .carousel-indicators li 和#quote-carousel .carousel-indicators .active 的宽度和高度是固定的，需要在不同的屏幕 View 中进行更改

试试这个:

@media (max-width: 767px) {
  #quote-carousel .carousel-indicators li {
    height: 35px;
    width: 35px;
  }
  #quote-carousel .carousel-indicators .active {
    height: 70px;
    width: 70px;
  }
}