在5列Bootstrap网格中保持单行

时间:2018-01-02 00:29:54

标签: css bootstrap-4

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

希望有所帮助!

答案 2 :(得分:0)

如此处所述:Non 12-divisible Equal columns on Bootstrap 4

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

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

答案 3 :(得分:0)

你似乎并不了解那里发生的事情。所以,这里有一个提示:

替换"列"在那个带有" c o l u n n"的代码片段中。换句话说,在每个字母之间添加一个空格,然后调整窗口大小。

您会看到所有5列都保留在一行中。这就是Flexbox的正常和预期行为,在这种情况下,它是Bootstrap列的强大功能。

只有当您将长文字或图像等放入某些列并且内容无法向下流动(在同一列中)时,Flexbox才会将最外面的列推到下一行(因为整个内容) width变得大于行中的可用宽度)。

当您将窗口调整到非常小的尺寸时,实际发生了什么。这仅与填充列的内容有关,而与断点无关。类col默认情况下不响应,即它没有任何断点。通过添加其他类(例如col-sm

)来添加/创建响应性