如何使 Carousel Bootstrap 3 响应式答案

【问题标题】：How to make Carousel Bootstrap 3 responsive如何使 Carousel Bootstrap 3 响应式
【发布时间】：2015-02-14 00:15:11
【问题描述】：

您好，我使用 Bootstrap 3 创建了轮播，并在其中添加了 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>
...

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

如何解决这个问题？谢谢

【问题讨论】：

在要隐藏的 div 上添加类 hidden-xs
但它仍然垂直堆叠。怎么做横版？ ^^
您正在使用sm-3 类，然后在xs 上默认为12 ....您可以将col-xs-6 类添加到这些元素中，保留两个：)

标签： jquery html css twitter-bootstrap

【解决方案1】：

不幸的是，这在 bootstrap 中是不可能的。如果您将hidden-xs 放在轮播项目上，它们将被排除在轮播之外。

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

【讨论】：

嘿，我已经尝试过了。还有它的好插件^^非常感谢。