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