Twitter bootstrap 引导转盘在移动设备上显示单个项目

我正在使用bootsrtap carousel创建一个carousel来显示可水平滚动的项目

这是它在桌面上的外观

这就是它在移动设备中的表现

这是html代码

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2000" id="featuredCarousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
    </div>
    <a class="left carousel-control text-info" href="#featuredCarousel" data-slide="prev"><i class="text-info glyphicon glyphicon-chevron-left"></i></a>
    <a class="right carousel-control text-info" href="#featuredCarousel" data-slide="next"><i class="text-info glyphicon glyphicon-chevron-right"></i></a>
</div>

这是javascript代码

<script>
$(function() {

    $('#featuredCarousel').carousel({
        interval: 10000
    })
    console.log($('.item'))
    $('.item').each(function() {

        var next = $(this).next();
        console.log(next);
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});
</script>

$（函数（）{
$（“#featuredCarousel”）.carousel({
间隔：10000
})
console.log（$（'.item'））
$（'.item'）。每个（函数（）{
var next=$（this.next（）；
console.log（下一步）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
if（next.next（）.length>0）{
next.next（）.children（':first child'）.clone（）.appendTo（$（this））；
}否则{
$（this）.兄弟姐妹（':first'）.children（':first child'）.clone（）.appendTo（$（this））；
}
});
});

桌面视图中的分区数不错，但我只想在手机上显示一个项目，其余部分显示在幻灯片上。我建议改用。如果您将旋转木马项目组织到引导列中（例如，将每个项目放入“col-md-4”），则Flickity将尊重引导CSS并识别每个屏幕分辨率要滚动的项目数。

我建议改用。如果您将旋转木马项目组织到引导列中（例如，将每个项目放入“col-md-4”中），则Flickity将尊重引导CSS并识别每个屏幕分辨率要滚动的项目数