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

Question

我正在学习如何在浏览器更改大小时调整 div 元素的大小。我希望我的 slider (参见 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>