我正在使用 Bootstrap 轮播，我想让我的轮播响应，以便它根据屏幕宽度在屏幕上显示不同数量的项目。
例如，假设我有六件事要在轮播中显示。
如果此人正在手机上查看，我想一次显示 1 个项目，并在轮播下方使用 6 个指示按钮在其余项目之间切换。
<section>
<div class="container">
<h2>Mobile - 1 box on screen</h2>
<div class="row">
<div id="document-slider-mobile" class="carousel slide" data-ride="">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li class="indicator active" data-slide-to="0" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="1" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="2" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="3" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="4" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="5" data-target="#document-slider-mobile"></li>
</ol>
<div class="item col-sm-12 active"><div class="box"><h3>This is box 1</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 2</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 3</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 4</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 5</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 6</h3></div></div>
</div>
</div>
</div>
</div>
</section>
但是，如果此人在桌面上查看，我想一次显示 4 个内容，轮播下方有 2 个指示按钮（第一个有 4 个项目，第二个有 2 个项目）。
我创建了一个示例来演示各种场景以及轮播的外观和行为。该演示使用 3 个不同的轮播来实现这一点，显然我正在寻找 1 个响应版本。
这是 jsfiddle 示例（您可能需要调整面板大小）： jsfiddle
