移动的Bootstrap缩略图旋转木马

时间:2015-10-12 17:05:27

标签: jquery html css twitter-bootstrap

我正在使用本教程的Bootstrap水平旋转木马,缩略图在幻灯片上显示4。 http://bootsnipp.com/snippets/featured/simple-carousel

我想为移动设备显示更少的商品。我可以让它连续显示1,但然后它垂直堆叠。我希望它们像在大屏幕上一样水平滚动。我怎么能这样做?

每张幻灯片都设置如下:

<div class="item active">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div><!--.row-->
            </div><!--.item-->

我已经看到了关于隐藏特定移动设备(https://stackoverflow.com/a/17662129/4597784)的答案,但这对我不起作用,因为图像将从数据库中提取并且我想显示所有图像,而不仅仅是每张幻灯片上的第一张。

0 个答案:

没有答案