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

您可以在此bootply中使用CSS / jQuery（如show）：http://www.bootply.com/dMnK7SqFrr。或创建两个旋转木马并根据显示尺寸显示它们。

我最近有类似的要求，在尝试基于上述示例的第一次实施后，我决定选择Slick。它是为了做出回应而做的。

Bootstrap Carousel在断点上显示1列

1 个答案: