Html Bootstrap 3 多列响应式轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18785963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 multi column responsive carousel
提问by gpcola
I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively. The responsive side of things is perfect, however when the last slide slides the carousel isn't wrapping back to the first slide. It just disappears. Can anyone identify the problem?
我一直在玩引导轮播，试图让它响应式地显示每张幻灯片 4 列。事物的响应方面是完美的，但是当最后一张幻灯片滑动时，轮播不会回到第一张幻灯片。它只是消失了。任何人都可以找出问题吗？
HTML
HTML
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a>
</div>
JS
JS
$('#carousel-example-generic').carousel();
CSS
CSS
.carousel.slide img {
width:100%;
height:auto;
}
[update] Here's an updated jsFiddlethat works - thanks to Adrift!
[更新] 这是一个更新的jsFiddle有效 - 感谢 Adrift！
[update2] http://jsfiddle.net/S2rnm/795/this version responsively shows a different carousel containing 4, 2 or 1 column depending on device size. It requires 3 carousel's each with different visible-x class.
[update2] http://jsfiddle.net/S2rnm/795/此版本根据设备大小响应显示包含 4、2 或 1 列的不同轮播。它需要 3 个轮播，每个轮播都有不同的visible-x 类。
采纳答案by adrift
The problem is that you have the carousel controls within .carousel-inner- you just need to place them outside of this class:
问题是你有旋转木马控件.carousel-inner- 你只需要将它们放在这个类之外：
</div> <!-- Close the .carousel-inner class before the controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
Example: http://jsfiddle.net/S2rnm/789/
回答by Pankaj Upadhyay
I try this code working proper
我尝试此代码正常工作
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap-theme.min.css" />
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_octopus.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/reef_cod.jpg" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/leather_Hymantfish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/ribbonfish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/croaker1.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/shrimp_black_tiger.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
</div>
