Html Bootstrap 缩略图滑块：根据屏幕显示图像数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18349987/
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 thumbnail slider : Displaying number of images based on screen
提问by Naju
I have created a bootstrap image thumbnail slider.I am displaying four images in the slider in a normal screen size.
我创建了一个引导图像缩略图滑块。我在滑块中以正常屏幕尺寸显示四个图像。
Now I want to display only one image in the thumbnail slider on the small screen as per responsive.
现在我想根据响应在小屏幕上的缩略图滑块中仅显示一张图像。
Please advice me.I am new bee to the responsive design.
请给我建议。我是响应式设计的新手。
My code:
我的代码：
<div class="container">
<div class="span8">
<h1>Bootstrap Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">?</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">?</a>
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
回答by guydog28
I don't believe you can achieve this solution through CSS alone. Because the slides of the carousel are the class "item", when this goes to a small screen it will still have 3 item slides, but with 4 vertically stacked thumbnails in each slide (the span3 contents of each slide become stacked with bootstrap responsive classes). However there are two workarounds.
我不相信您可以仅通过 CSS 来实现此解决方案。因为轮播的幻灯片是“项目”类，当它转到一个小屏幕时，它仍然有 3 个项目幻灯片，但每张幻灯片中有 4 个垂直堆叠的缩略图（每张幻灯片的 span3 内容与引导响应类堆叠在一起） ）。但是，有两种解决方法。
OPTION 1 - EASIER
选项 1 - 更简单
Have two carousels. One is the one you have shown, and the other omits the row-fluid and item wrappers, and places item on each span3. Your original gets the class "hidden-phone" and the new one gets a class "visible-phone". Additionally, you'll want to omit the slide indicators on the phone version to reduce clutter for many items. Below I have included a linke to the jsfiddle example. Just move the vertical frame separator in the middle to the right to resize to phone width (and vice versa).
有两个旋转木马。一个是您显示的那个，另一个省略了 row-fluid 和 item 包装器，并将 item 放在每个 span3 上。您的原件获得“隐藏电话”类，而新获得“可见电话”类。此外，您需要在手机版本上省略滑动指示器以减少许多项目的混乱。下面我包含了一个指向 jsfiddle 示例的链接。只需将中间的垂直框架分隔符向右移动即可调整为手机宽度（反之亦然）。
http://jsfiddle.net/guydog28/tEKg8/
http://jsfiddle.net/guydog28/tEKg8/
OPTION 2 - HARDER
选项 2 - 更难
The second option is much more difficult. If you must only have one carousel, you have to key on the window resize event to see if you are now phone size or above phone size. Then you actually will have to manipulate the DOM, to make your carousel look like carousel two and then back again on window resize. So the javascript would look something like this:
第二种选择要困难得多。如果您必须只有一个轮播，则必须在窗口调整大小事件上键入以查看您现在是手机尺寸还是手机尺寸以上。然后你实际上将不得不操纵 DOM，使你的轮播看起来像轮播二，然后再回到窗口调整大小。所以javascript看起来像这样：
$(document).ready(function () {
//start the carousel
$(".carousel").carousel();
//bind to window resize event to see if we've toggled
//between phone and larger
$(window).resize(function () {
if ($(window).width() < 768) {
//Phone size, manipulate DOM for phone here
} else {
//Not phone size, re-manipulate DOM to get back to original carousel
}
//Re-init carousel
$(".carousel").carousel();
});
});
