Bootstrap 4旋转木马响应问题在铬 [英] Bootstrap 4 carousel responsive issue in chrome
问题描述
以下是我的代码:
< div id = carouselExampleIndicatorsclass =carousel slidedata-ride =carousel>
< li data-target =#carouselExampleIndicatorsdata-slide-to =0class =active>< / li>
< li data-target =#carouselExampleIndicatorsdata-slide-to =1>< / li>
< li data-target =#carouselExampleIndicatorsdata-slide-to =2>< / li>
< / ol>
< div class =carousel-innerrole =listbox>
< div class =carousel-item active>
< / div>
< div class =carousel-item>
< / div>
< div class =carousel-item>
< / div>
< / div>
< a class =carousel-control-prevhref =#carouselExampleIndicatorsrole =buttondata-slide =prev>
< span class =sr-only>上一个< / span>
< / a>
< a class =carousel-control-nexthref =#carouselExampleIndicatorsrole =buttondata-slide =next>
< span class =sr-only>下一步< / span>
< / a>
< / div>
以下是我的小提琴:
< a href =https://jsfiddle.net/benjamin_edwards/1gx43oph/ =nofollow noreferrer> https://jsfiddle.net/benjamin_edwards/1gx43oph/
,这是一个问题的图像:
正如您所看到的左侧窗格是Chrome,右侧是Safari。只有Chrome有问题 - 有没有人遇到过这个问题? 欢呼声, 好的,我一直在搜索网页,并且有一个解决方案。 我在这里更新了我的小提琴: https://jsfiddle.net/benjamin_edwards/1gx43oph/ 我从这里得到了答案: https://github.com/twbs/bootstrap/issues/21611 来自我的文章这里: https:// github .com / twbs / bootstrap / issues / 21966 希望这可以帮助其他人:) I have an issue with Bootstrap 4 carousel in Chrome only. Here is my code: Here is my fiddle: https://jsfiddle.net/benjamin_edwards/1gx43oph/ and here is an image of what the issue is: As you can see the left pane is Chrome and right is Safari. Only Chrome has the blooming issue - has anyone experienced this before? Cheers, Ben. OK so I have been searching the web and there is a solution for this I have updated my fiddle here: https://jsfiddle.net/benjamin_edwards/1gx43oph/ and I got the answers from here: https://github.com/twbs/bootstrap/issues/21611 from my post here: https://github.com/twbs/bootstrap/issues/21966 Hope this can help others :) 这篇关于Bootstrap 4旋转木马响应问题在铬的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
.carousel -item.active,
.carousel-item-next,
.carousel-item-prev {
display:block!important;
}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block !important;
}