我想通过向特定项目添加隐藏的 sm:flex 来使我的导航栏具有响应能力。这意味着它默认会隐藏，但仅在小屏幕及以上屏幕上显示。我做了一些调试，发现隐藏覆盖了所有内容，甚至是响应式变体。其他显示属性适用于响应式变体。这是我的代码：
className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"
Tailwind 由移动优先设计驱动，就像 bootstrap 和其他一些 CSS 框架一样。参考：https://tailwindcss.com/docs/responsive-design/#mobile-first https://tailwindcss.com/docs/responsive-design/#mobile-first
这意味着没有变体的类将首先应用于较小的屏幕，然后您可以为更大的屏幕添加变体。
所以，你想要实现的目标应该是这样的：
className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"
我希望这有帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
