在 5 列 Bootstrap 网格中保持单行答案

【问题标题】：Maintain single row in 5 column Bootstrap grid在 5 列 Bootstrap 网格中保持单行
【发布时间】：2018-06-11 18:27:09
【问题描述】：

当我在整页中对https://stackoverflow.com/a/42464655/7835535 运行代码 sn-p 时，当屏幕大小调整为 xs 时，第 5 列会在下一行结束。当屏幕缩小到超小时，有没有办法保持单行？换句话说，如何更改自动布局列的断点？

【问题讨论】：

【解决方案1】：

尝试@media (max-width: ) 代码指定最大和最小宽度并为该屏幕尺寸编写特定代码

【讨论】：

【解决方案2】：

您也可以尝试将列的宽度设置为 % 或 em 而不是 px 以查看是否有任何区别。

希望有帮助！

【讨论】：

【解决方案3】：

这里解释：Non 12-divisible Equal columns on Bootstrap 4

每个断点都有自动布局列...

col = 自动布局 xs 及以上
col-sm = 自动布局 sm 及以上
col-md = 自动布局 md 及以上
col-lg = 自动布局 lg 及以上
col-xl = 自动布局 xl

【讨论】：

【解决方案4】：

你似乎不明白那里实际发生了什么。所以，这里有一个提示：

将该代码 sn-p 中的单词“column”替换为“c o l u m n”。换句话说，在每个字母之间添加一个空格，然后调整窗口大小。

您会看到所有 5 列都保留在一行中。这是 Flexbox 的正常和预期行为，这就是在这种情况下为 Bootstrap 列提供动力的原因。

只有当你把长的文字或图片等放入某些列并且内容不能向下流动（在同一列内）时，Flexbox才会将最外面的列推到下一行（因为整体内容宽度变得大于一行中的可用宽度）。

当您将窗口大小调整为非常小的尺寸时，这就是实际发生的情况。这仅与填充列的内容有关，与断点无关。 col 类默认是无响应的，即它没有任何断点。通过添加其他类（例如col-sm 等）来添加/创建响应性。

【讨论】：