自举网格堆叠（评级栏）

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