Bootstrap XS列包装 [英] Bootstrap xs columns wrap
问题描述
对于最小的xs大小,即使我的列加起来等于12,如果屏幕宽度减小到某个限制之外,它们也无法正常工作.例如:-
For the smallest xs size, even if I have the columns adding up to 12, they don't work as expected if screen width decreases beyond a certain limit. For instance:-
<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代码来赋予容器最小宽度.但是,我认为引导程序可能有更好的方法来处理此问题
I would expect the if I decrease the size the last column will get stacked up to the end of the screen. However, this is not the case. As the screen decreases beyond a certain limit, the last column wraps up toward the beginning of the screen. I have thought about writing css code to give the container min-width. However, I thought that bootstrap might have a better way to handle this
推荐答案
这是一个已知问题: https://github.com/twbs/bootstrap/issues/13221
在屏幕宽度< 360px处,.col-xs-1
列开始自动换行,因为..
At screen widths <360px, the .col-xs-1
columns start to wrap because..
",同时将列设置为宽度:8.333333%; 由于15px的填充,列的宽度至少应为30px 在任一侧.因此,存在不匹配的情况,而浏览器只是 堆积列"-@mdo
"while the column is set to width: 8.333333%;, the column is going to be at least 30px wide because of the 15px padding on either side. Therefore, there's a mismatch and the browser just stacks the columns" - @mdo
可以通过在很小的屏幕上不使用col-xs-1
来避免此问题.您还应该考虑是否将屏幕调整为小于360像素.在大多数情况下不是.
The problem can be avoided by not using col-xs-1
on very small screens. You should also consider if the screen will realistically be resized less than 360px. In most cases it is not.
注意:在 Bootstrap 4 中,col-xs-1
现在为col-1
.
这篇关于Bootstrap XS列包装的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!