CSS 带有多个项目的 Twitter Bootstrap 响应式轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12518412/
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
Twitter Bootstrap Responsive Carousel With Multiple Items
提问by Noz
I'm trying to setup Twitter Bootstrap carousel with multiple items while maintaining the responsiveness.
我正在尝试使用多个项目设置 Twitter Bootstrap 轮播，同时保持响应能力。
I have a jsfiddle for testing setup http://jsfiddle.net/Va8Un/
我有一个 jsfiddle 用于测试设置http://jsfiddle.net/Va8Un/
What I would like to happen is to display 4 images each with caption to hold item titles and so forth within a carousel pane and they should be resized to fit the screen to stay on the same row at all times. Right now it's completely ignoring any attempts I make to adjust the image size to the screen, I figured setting the img max-width:100%;would do the trick but it doesn't seem to effect it. Moreover, the 4th image is being pushed to a second row because the images aren't resizing:
我想要发生的是在轮播窗格中显示 4 个图像，每个图像带有标题以保存项目标题等，并且应该调整它们的大小以适应屏幕以始终保持在同一行。现在它完全忽略了我为调整屏幕图像大小所做的任何尝试，我认为设置 imgmax-width:100%;可以解决问题，但它似乎没有影响。此外，由于图像没有调整大小，第四张图像被推到第二行：
Any way to fix this with pure CSS or should I look for options beyond Twitter Bootstrap?
有什么办法可以用纯 CSS 解决这个问题，还是我应该寻找 Twitter Bootstrap 之外的选项？
You can view the result here: http://jsfiddle.net/Va8Un/embedded/result/
你可以在这里查看结果：http: //jsfiddle.net/Va8Un/embedded/result/
Here is the HTML:
这是 HTML：
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails span12">
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
...
</div>
<div class="item">
...
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">?</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">?</a>
</div>
</diV>
回答by Andres Ilich
You can do this with the bootstrap fluid grid alone, just specify a .container-fluidcontainer along with a .row-fluidrow and give each one of your list items housing an image a .span*class, in this case 3 (3*4=12).
您可以单独使用引导流体网格来完成此操作，只需指定一个.container-fluid容器和.row-fluid一行，并为每个包含图像的列表项指定一个.span*类，在本例中为 3 (3*4=12)。
.container {
margin-top: 10px;
}
img
{
max-width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span3">
<div class="caption">
<h5>Caption</h5>
</div>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">?</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">?</a>
</div>
</div>
</div>Demo: http://jsfiddle.net/Va8Un/10/
演示：http: //jsfiddle.net/Va8Un/10/
EDIT: here is the demo with corrections http://jsfiddle.net/Va8Un/550/
编辑：这是带有更正的演示 http://jsfiddle.net/Va8Un/550/
回答by Ryan Walton
I did it this way using Twitter Bootstrap:
我使用 Twitter Bootstrap 这样做：
<!-- Images Thumbnails -->
<div style="position:absolute;top:430px;height:115px;width:350px;margin:10px 0 0 10px;">
<p style="margin:0;">Images</p>
<!-- Product Images Carousel -->
<div id="ImagesCarousel" class="carousel slide">
<!-- carousel items -->
<div class="carousel-inner">
<div class="active item">
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
</div>
<div class="item">
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
</div>
<div class="item">
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
<?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#ImagesCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#ImagesCarousel" data-slide="next">›</a>
</div>
</div>
Where 'ryan_thumbnail_carousel_productimages.html' is:
其中“ryan_thumbnail_carousel_productimages.html”是：
<div class="thumbnail" style="float:left;margin:10px 15px 0 0;width:70px;height:70px; position:relative;"></div>
