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

Question

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

Demo url:

现在我想在小屏幕按响应上只显示一个缩略图滑块图像。

请指点我，我是新蜂的响应式设计。

我的代码：

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

Answer 1

我不相信你可以单独实现通过CSS这种解决方案。因为转盘的幻灯片是类“项目”，所以当它转到一个小屏幕时，它仍然会有3个项目幻灯片，但每个幻灯片中有4个垂直堆叠的缩略图（每张幻灯片的span3内容都会与引导响应类）。但有两种解决方法。

OPTION 1 - 更容易

有两台转盘。一个是你已经显示的那个，另一个是省略行流体和物品包装，并将物品放置在每个span3上。您的原创课程获得“隐藏电话”课程，新课程获得“可见电话”课程。此外，您需要省略电话版本上的幻灯片指示器，以减少许多项目的混乱。下面我已经包含了一个jsfiddle示例的linke。只需将中间的垂直帧分隔符向右移动即可调整至手机宽度（反之亦然）。

http://jsfiddle.net/guydog28/tEKg8/

选择2 - HARDER

第二个选项是要困难得多。如果您必须只有一个轮播，则必须键入窗口调整大小事件，以查看您现在是手机大小还是手机大小以上。然后，您实际上将不得不操纵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(); 
    }); 
});