如何使Carousel Bootstrap 3响应(How to make Carousel Bootstrap 3 responsive)

如何使Carousel Bootstrap 3响应(How to make Carousel Bootstrap 3 responsive)

您好我使用Bootstrap 3创建Carousel，并在其中添加4个图像。 当我调整浏览器大小时，图像是堆栈。 我希望在移动模式下调整大小时只显示2个图像，或者最适合。

这是我的代码：

... <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> </div> ...

这是调整大小时的屏幕截图：

如何解决？ 谢谢

Hello I create Carousel using Bootstrap 3, and I add 4 images inside it. When I resize browser, the images are stack. I want show just 2 images when resize it in mobile mode, or whatever the best fit.

Here is my code :

... <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> <div class="col-sm-3 center"><img src="assets/images/prodlogo_1.png" alt="..."></div> </div> </div> </div> ...

Here is my screenshot when resize it :

How to fix that? Thank you

最满意答案

不幸的是，这不适用于bootstrap。 如果将hidden-xs放在旋转木马上，它们将从旋转木马中排除。

这是一个jQuery插件，可以提供帮助： http ： //owlgraphic.com/owlcarousel/index.html

This is unfortunately not possible with bootstrap. If you put hidden-xs on carousel items, they will be excluded from the carousel.

Here is a jQuery plugin that will help out: http://owlgraphic.com/owlcarousel/index.html