自舉網格堆疊（評級欄）

Question

當我縮小屏幕時，第三列被堆疊在底部。我想要三個橫向時尚。請幫忙
其實它發生在屏幕寬度變爲358px時。

代碼：

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-1 col-sm-2 col-md-2 col-lg-2"> 
       <h5 class="text-right"> 5* </h5> 
       <h5 class="text-right"> 4* </h5> 
       <h5 class="text-right"> 3* </h5> 
       <h5 class="text-right"> 2* </h5> 
       <h5 class="text-right"> 1* </h5> 
      </div> 
      <div class="col-xs-10 col-sm-8 col-md-8 col-lg-8"> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
      </div> 
      <div class="col-xs-1 col-sm-2 col-md-2 col-lg-2"> 
       <h5> 50 </h5> 
       <h5> 49 </h5> 
       <h5> 38 </h5> 
       <h5> 25 </h5> 
       <h5> 12 </h5> 
      </div> 
     </div> 
     </div> 

Answer 1

這是一個known issue with Bootstrap，但它不是一件可以 「固定」。

列的兩邊都有15px的填充，最小的列單位（col-xs-1）只有8.333％寬。最終屏幕寬度太窄，而且列也會纏繞。

一個簡單的解決方法是，以除去填充：

.no-padding { 
    padding: 0; 
} 

http://www.codeply.com/go/8OVFsrGPJg