jquery - Bootstrap Carousel 在断点处显示 1 列

Question

所以我有一个显示 4 个网格的旋转木马，我希望它在移动设备上只显示 1 个网格 (col-sm-12)，有人知道我如何使用 jquery 或 css 实现这一点吗？

目前它在 col-sm-12 处列出了 4 个网格，我希望它在 col-sm-12 处显示 1 个网格:

<div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
        <div class="item active">
            <ul class="thumbnails">
                <li class="col-md-3 col-sm-12">
                    <div class="thumbnail">
                        <img src="http://placehold.it/260x180" alt="">
                    </div>
                    <div class="caption">
                        <h5>Arrival Dec, 2013</h5>
                    </div>
                </li>
                <li class="col-md-3 col-sm-12">
                    <div class="thumbnail">
                        <img src="http://placehold.it/260x180" alt="">
                    </div>
                    <div class="caption">
                        <h5>Arrival, November, 2013</h5>
                    </div>
                </li>
                <li class="col-md-3 col-sm-12">
                    <div class="thumbnail">
                        <img src="http://placehold.it/260x180" alt="">
                    </div>
                    <div class="caption">
                        <h5>Arrival Feb, 2014, ON</h5>
                    </div>
                </li>
                <li class="col-md-3 col-sm-12">
                    <div class="thumbnail">
                        <img src="http://placehold.it/260x180" alt="">
                    </div>
                    <div class="caption">
                        <h5>Arrival March 2014, ON</h5>
                    </div>
                </li>
            </ul>
        </div>
    </div>

Answer 1

之前有人问过:Responsive bootstrap carousel multiple columns in item

您可以使用 CSS/jQuery，就像在这个 bootply 中显示的那样:http://www.bootply.com/dMnK7SqFrr .或者创建两个轮播并根据显示尺寸显示它们。

我最近有类似的需求，在尝试基于上述示例的第一个实现之后，我决定使用 Slick .它专为响应而生。