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

在给定的教程链接中，缩略图与内容区域重叠，因为其设置为NSBundle *bundle = [NSBundle bundleForClass:[self class]]; NSImage *myImage = [bundle imageForResource:@"MyImageName"];媒体查询中应为position: absolute; 这是参考类：

position: relative;

在给定的教程中，有固定的宽度和宽度。高度为＃quote-carousel .carousel-indicators li和＃quote-carousel .carousel-indicators .active，需要在不同的屏幕视图中进行更改

试试这个：

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

图像见证旋转木马

1 个答案: