引导网格堆叠(评级栏)

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

这是 Bootstrap 的已知问题，但不能"修复"。

列的两侧都有 15px 的填充，最小的列单位 (col-xs-1( 只有 8.333% 宽。最终屏幕宽度太窄，列换行。

一个简单的解决方法是删除填充：

.no-padding {
    padding: 0;
}

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