顺风响应反向工作我加了课
"flex", "justify-between", "flex-wrap", "items-center", "sm:flex-col",
当我的窗口在正常的桌面视图中加载时,我的sm类被激活,flex变成flex-col,当我切换到移动的设备的响应视图时,它又切换回桌面视图,带有flex-row为什么会这样?我只是想在window view上做flex row,在移动的上做flex-col。
6tqwzwtp1#
这是因为顺风工作在移动的第一个断点系统。简单地说,它是反向的引导。并正在按预期工作。根据docs:默认情况下,Tailwind使用移动优先的断点系统,类似于您可能在其他框架(如Bootstrap)中使用的断点系统。这意味着无前缀的实用程序(如大写)在所有屏幕尺寸上都有效,而有前缀的实用程序(如md:大写)仅在指定的断点及以上生效。更新代码:
"flex", "md:justify-between", "md:flex-wrap", "md:items-center", "flex-col",
这将在md:断点以下的任何屏幕中产生column影响。wrap影响md:断点以上的屏幕
md:
column
wrap
1条答案
按热度按时间6tqwzwtp1#
这是因为顺风工作在移动的第一个断点系统。简单地说,它是反向的引导。并正在按预期工作。
根据docs:
默认情况下,Tailwind使用移动优先的断点系统,类似于您可能在其他框架(如Bootstrap)中使用的断点系统。
这意味着无前缀的实用程序(如大写)在所有屏幕尺寸上都有效,而有前缀的实用程序(如md:大写)仅在指定的断点及以上生效。
更新代码:
这将在
md:
断点以下的任何屏幕中产生column
影响。wrap
影响md:
断点以上的屏幕