如何使Carousel Bootstrap 3响应

Question

您好我使用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>
...

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

如何解决这个问题？谢谢

Answer 1

遗憾的是，这不适用于bootstrap。如果您将hidden-xs放在轮播项目上，它们将被排除在轮播之外。

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