顺风响应性反向工作



顺风响应能力反向工作

我已经添加了类

"flex",
"justify-between",
"flex-wrap",
"items-center",
"sm:flex-col",

到我的div当我的窗口在普通桌面视图中加载时我的sm类被激活并且flex变成了flex-col当我切换到响应式移动视图时它会切换回桌面视图并使用flex-row

为什么会这样?

我只是想让flex行窗口视图和flex-col移动

这是因为顺风适用于移动优先断点系统。简单来说就是反向引导。并按预期工作

根据文档:

默认情况下,Tailwind使用一个移动优先的断点系统,类似于你在Bootstrap等其他框架中使用的断点系统。

这意味着无前缀的实用程序(如uppercase)在所有屏幕尺寸上生效,而带前缀的实用程序(如md:uppercase)仅在指定的断点及以上生效。

更新代码:

"flex",
"md:justify-between",
"md:flex-wrap",
"md:items-center",
"flex-col",

这将在md:断点以下的任何屏幕中影响columnwrap对以上md:断点的影响

相关内容

  • 没有找到相关文章

最新更新