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

Bootstrap网格堆叠（评级栏）

1 个答案: