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

Question

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

目标：

我能想到的解决这个问题的唯一方法是每个列表元素相对于浏览器的大小做出，所以我试图引导的网格布局，但它不工作。我怎样才能做到这一点？谢谢。如预期

电网不工作：

<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。

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>