如何在浏览器大小调整时保持元素数量/缩小

Question

我正在学习如何在浏览器更改大小时调整div元素的大小。我希望我的滑块（见Fiddle）总是显示10张幻灯片，即使浏览器变小（见下图）。

目标：

我能想到实现这一点的唯一方法是使每个列表元素相对于浏览器大小，所以我尝试了Bootstrap的网格布局，但它不起作用。我怎样才能做到这一点？谢谢。

网格没有按预期工作：

<div class="row wrapper">
  <span class="prev-slide col-md-1"><</span>
  <ul class="tab-container row col-md-10">
    <li class="col-md-1">Slide 1</li>
    <li class="col-md-1">Slide 2</li>
    <li class="col-md-1">Slide 3</li>
    <li class="col-md-1">Slide 4</li>
    <li class="col-md-1">Slide 5</li>
    <li class="col-md-1">Slide 6</li>
    <li class="col-md-1">Slide 7</li>
    <li class="col-md-1">Slide 8</li>
    <li class="col-md-1">Slide 9</li>
    <li class="col-md-1">Slide 10</li>

  </ul><span class="next-slide col-md-1">></span>
</div>

我上面提供的JSFiddle没有实现Bootstrap网格，因为它不起作用。

Answer 1

当浏览器变小时，将col-sm-1和col-xs-1添加到所有类中。

 <div class="row wrapper">
  <span class="prev-slide col-md-1 col-sm-1 col-xs-1"/>
  <ul class="tab-container row col-md-10">
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 1</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 2</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 3</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 4</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 5</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 6</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 7</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 8</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 9</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 10</li>

  </ul><span class="next-slide col-md-1 col-sm-1 col-xs-1">></span>
 </div>