在Bootstrap 3.0中使用缩略图的旋转木马

Question

我需要制作Bootstrap 3.0 Carousel以显示缩略图幻灯片.我怎样才能做到这一点？这是我正在寻找的图像:

这是Bootstrap 2的一个工作示例,但我需要这个用于Bootstrap 3.0:Bootstrap Thumbnail Slider

Answer 1

这可以使用每个轮播项目内的网格来完成.

       <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    ...add more item(s)
                 </div>
        </div>

演示使用轮播的示例缩略图滑块:http:
//www.bootply.com/81478

旋转木马指示器作为缩略图的另一个示例:http: //www.bootply.com/79859

Answer 2

@Skelly的回答是正确的.它不会让我添加评论(<50 rep)...但是要回答你的答案:在他链接的例子中,如果你添加

col-xs-3 

每个缩略图的类,如下所示:

class="col-md-3 col-xs-3"

然后它应该保持你想要的方式,当大小到手机宽度.