twitter-bootstrap Bootstrap Carousel Slider：一次显示 4 张图片 - 一次只显示一张图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31685234/
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 Carousel Slider: 4 Images at once - only shows one image at a time?
提问by Ken D
I am trying to implement this 4 image slider on my website, but for some reason only one image shows at a time.
我正在尝试在我的网站上实现这 4 个图像滑块，但由于某种原因一次只显示一个图像。
I copy pasted the code here: http://www.bootply.com/94452
我在这里复制粘贴代码：http: //www.bootply.com/94452
For some reason, only one image occupies the space reserved for 4 of the images. When you hit the right arrow or wait for the interval, it goes to the second image.
出于某种原因，只有一张图像占用了为 4 张图像保留的空间。当您点击右箭头或等待间隔时，它会转到第二个图像。
Does anyone know why this might be?
有谁知道为什么会这样？
See code in comments below:
请参阅下面评论中的代码：
回答by Manindra Singh
if you want 4 images at a time to scroll then your images are not nested properly.just use this code it should work fine.
如果您希望一次滚动 4 个图像，那么您的图像没有正确嵌套。只需使用此代码，它应该可以正常工作。
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=2" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=3" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=4" class="img-responsive"></a></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=5" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=6" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=7" class="img-responsive"></a></div>
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=8" class="img-responsive"></a></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
回答by thusvir arjun
you can use carousel-indicators in your view and set each slide with a picture in ascending order eg.
您可以在视图中使用轮播指示器并按升序设置每张幻灯片的图片，例如。
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:89%" >
<div class="item active">
<img src="picture source" alt="First slide">
<div class="carousel-caption">
<strong>anything on an image displayed</Strong>
</div>
</div>
hope it is helpful...
希望它有帮助...
