Bootstrap xs 列换行 [英] Bootstrap xs columns wrap

问题描述

对于最小的 xs 尺寸，即使我的列加起来为 12，如果屏幕宽度减小超过某个限制，它们也不会按预期工作.例如:-

<div class="row"><div class="col-xs-2">
<div class="col-xs-1 col-xs-offset-8>

<div class="col-xs-1>

我希望如果我减小最后一列的大小，它会堆积到屏幕的末尾.然而，这种情况并非如此.当屏幕减小超过某个限制时，最后一列会向屏幕的开头收拢.我想过编写 css 代码来为容器提供最小宽度.但是，我认为引导程序可能有更好的方法来处理这个

解决方案

这是一个已知问题:https://github.com/twbs/bootstrap/issues/13221

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

<块引用>

"而将列设置为宽度:8.333333%;,由于 15px 填充，列的宽度将至少为 30px两边.因此，存在不匹配并且浏览器只是堆叠列"-@mdo

在非常小的屏幕上不使用 col-xs-1 可以避免这个问题.您还应该考虑屏幕实际调整大小是否小于 360 像素.大多数情况下不是.

<小时>

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

<小时>

相关:最小尺寸的引导网格中断

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>

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

解决方案

This is a known issue: https://github.com/twbs/bootstrap/issues/13221

At screen widths <360px, the .col-xs-1 columns start to wrap because..

"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

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.

---

Note: In Bootstrap 4, col-xs-1 is now col-1.

---

Related: Bootstrap grid breaks in smallest size

这篇关于Bootstrap xs 列换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！