小编典典

Bootstrap XS列包装

css

对于最小的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代码来赋予容器最小宽度。但是,我认为引导程序可能有更好的方法来处理此问题


阅读 304

收藏
2020-05-16

共1个答案

小编典典

在屏幕宽度<360px处,.col-xs-1列开始换行,因为..

“虽然将列设置为宽度:8.3333333%;但是由于两边的填充均为15px,所以列的宽度至少为30px。因此,存在不匹配,浏览器只是将列堆叠在一起”-@mdo

通过不在col-xs-1非常小的屏幕上使用,可以避免此问题。您还应该考虑是否将屏幕调整为小于360像素。在大多数情况下不是。


注意:在 Bootstrap 4中col-xs-1现在是col-1

2020-05-16