对于最小的xs大小,即使我的列加起来等于12,如果屏幕宽度减小到某个限制之外,它们也不会按预期工作。例如:-
<div class="container"> <div class="row"> <div class="col-xs-2"> </div> <div class="col-xs-1 col-xs-offset-8> </div> <div class="col-xs-1> </div> </div>
我希望如果减小尺寸,最后一列将堆积到屏幕末端。然而,这种情况并非如此。当屏幕减小到超过特定限制时,最后一列将朝屏幕的开头逐渐结束。我已经考虑过编写CSS代码来赋予容器最小宽度。但是,我认为引导程序可能有更好的方法来处理此问题
在屏幕宽度<360px处,.col-xs-1列开始换行,因为..
.col-xs-1
“虽然将列设置为宽度:8.3333333%;但是由于两边的填充均为15px,所以列的宽度至少为30px。因此,存在不匹配,浏览器只是将列堆叠在一起”-@mdo
通过不在col-xs-1非常小的屏幕上使用,可以避免此问题。您还应该考虑是否将屏幕调整为小于360像素。在大多数情况下不是。
col-xs-1
注意:在 Bootstrap 4中 ,col-xs-1现在是col-1。
col-1