Bootstrap 网格堆叠（评分栏）

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，但不是"fixed"。

列的两边都有 15px 的内边距，最小的列单元 (col-xs-1) 只有 8.333% 宽。最终屏幕宽度太窄，列换行。

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

.no-padding {
    padding: 0;
}

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

Bootstrap 网格堆叠（评分栏）

Bootstrap grid gets stacked (Rating Bar)

css

stacked

twitter-bootstrap

twitter-bootstrap-3