Css 引导缩略图滑块：根据屏幕显示图像数

我已经创建了一个引导图像缩略图滑块。我在滑块中以正常屏幕大小显示四个图像

现在，我只想在小屏幕上的缩略图滑块中显示一个图像

请告诉我。我是响应式设计的新手。

我的代码：

<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>

引导缩略图滑块

我不相信单靠CSS就可以实现这个解决方案。因为旋转木马的幻灯片是“项目”类，当它进入小屏幕时，仍然会有3个项目幻灯片，但每个幻灯片中有4个垂直堆叠的缩略图（每个幻灯片的span3内容与引导响应类堆叠）。然而，有两种解决办法

选项1-更简单

有两个旋转木马。一个是您显示的，另一个省略了行流体和项目包装，并将项目放置在每个span3上。你原来的得到一个类“隐藏电话”，新的得到一个类“可见电话”。此外，您还需要省略手机版本上的滑动指示器，以减少许多项目的混乱。下面我包含了一个指向JSFIDLE示例的链接。只需将垂直帧分隔符移到中间，右边就可以调整到电话宽度（反之亦然）。

选项2-更难

第二种选择要困难得多。如果您必须只有一个转盘，则必须键入“窗口大小调整”事件，以查看您现在是手机大小还是手机大小以上。然后，您实际上必须操作DOM，使您的旋转木马看起来像旋转木马2，然后再次返回窗口调整大小。所以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();
    });
});

$（文档）.ready（函数（）{
//启动旋转木马
$（“.carousel”）.carousel（）；
//绑定到窗口大小调整事件以查看是否已切换
//在手机和大型电脑之间
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
//电话大小，在此处操作电话的DOM
}否则{
//不是电话大小，请重新操作DOM以返回原始旋转木马
}
//重新初始化转盘
$（“.carousel”）.carousel（）；
});
});