如何在瀏覽器中調整元素數量/縮小調整大小

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>