图像证明转盘
图像证明转盘
提问于 2017-12-13 14:37:57
我正在开发一个网站。
我使用了证明旋转木马，我使用了这个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>但我有一个问题，旋转木马中的图像在移动屏幕上的位置会发生变化。我试图清除image类：img-responsive，但没有效果。如何使图像无响应？？
回答 1
Stack Overflow用户
发布于 2017-12-13 15:05:14
在给定的教程链接中，缩略图与内容区域重叠，因为它是用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的宽度和高度是固定的，需要在不同的屏幕视图中进行更改
试试这个：
@media (max-width: 767px) {
#quote-carousel .carousel-indicators li {
height: 35px;
width: 35px;
}
#quote-carousel .carousel-indicators .active {
height: 70px;
width: 70px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47786960
复制相关文章
相似问题
腾讯云开发者
