Bootstrap轮播响应每个断点的单独设置？

Question

我使用bootstrap carousel列出某些类别下的一些最新帖子。我使用了以下代码：

<div id="carousel-example-generic-0" class="carousel slide"> 
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic-0" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic-0" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic-0" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner"> 
        <!-- Slide -->
        <div class="item active">
            <div class="row">
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div class="item">
            <div class="row">
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic-0" data-slide="prev"> 
    <span class="icon-prev"></span> </a> 
    <a class="right carousel-control" href="#carousel-example-generic-0" data-slide="next"> <span class="icon-next"></span> </a> 
</div>

这里的问题是，在小型设备平板电脑屏幕及以上，转盘在一条线上显示4个帖子，这很好。但在超小型设备中，转盘仍然显示4个帖子，但包裹成多行。我尝试将内部项目div类调整为'col-lg- ，col-sm - ，col-md- ，col-xs - '来制作包装的项目在一条线上。我做到了，但它似乎并不是我最好的事情。因为在非常小的屏幕中，如果我将四个帖子排成一行，那么内容就很难阅读。

所以，我想知道的是，如果有一些方法可以使引导响应视点大小断点，就像在小屏幕上只显示一行中的2个项目一样？

Answer 1

经过一些研究，我认为bootstrap还不支持旋转木马响应视口断点。所以我找到了另一个Slick，它具有以下功能：

1. 完全响应。
2. 使用其容器进行缩放。
3. 每个断点的单独设置
4. ...