html - Tailwind 响应式 flexbox 属性未按预期工作
问题描述
默认情况下,ul 有一个justify-start flexbox 属性。当为小屏幕应用响应式设计时:它将是justify-center,对于中屏幕:justify-around和对于大屏幕:justify-evenly。但是,对于所有屏幕尺寸,它只显示 justify-evenly 属性,它会覆盖所有其他 justify-property。如何为不同的屏幕应用不同的 justify-property?
<nav className='py-8'>
<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row justify-around lg:flex-row-reverse justify-evenly'>
<Link href='#'>
<a className='p-2 text-2xl font-bold transition duration-500 hover:bg-indigo-300'> Beginnings</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Now</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Tech</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Talks</a>
</Link>
<Link href='#'>
<a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Connect</a>
</Link>
</ul>
</nav>
解决方案
您添加了通用justify-around
和justify-evenly
类,而不是屏幕大小前缀md:justify-around
和lg:justify-evenly
. 在 Tailwind 中,无前缀类适用于所有屏幕尺寸。前缀类适用于所有大于或等于给定前缀的屏幕尺寸。
<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row md:justify-around lg:flex-row-reverse lg:justify-evenly'>
推荐阅读
- java - 使用 SharedPrefernces 对 RecyclerView 中的整数求和
- javascript - 是否可以在箭头函数中获取 this 以及全局 this?
- laravel-5 - 如何在 laravel 和两个模块中设置 Auth
- c++ - 在同一个 Visual Studio 项目中链接静态和动态库
- ios - 在 SwiftUI 中使用十六进制颜色
- flutter - 如何将 Stack 作为 CustomScrollView 的子项
- sql-server - 对每一行执行检查约束的所有情况
- python - 如何使用向导页面强制布局调整大小
- flutter - Flutter Sqlite Query Error 数据获取错误
- azure - 如何检查从 Azure Active Directory 收到的令牌?