我正在尝试在 中创建一个 Fixed Navigation Bar
Tailwind CSS
和粘性滚动主页,但无论我尝试什么,我都无法让它工作……
这是我取得的成就:
这是我的代码:
<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md z-50 w-full px-5 py-2 flex justify-between items-center">
<router-link to="/" class="text-2xl text-white">My App</router-link>
<div>
<router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
<router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
</div>
</header>
<div class="flex">
<!-- Sidebar -->
<aside class="fixed bg-white h-screen py-5 shadow">
<div class="flex flex-col text-left">
<router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
<i class="fa fa-dashboard"></i>
<span class="">Dashboard</span>
</router-link>
</div>
</aside>
<!-- Main Page -->
<main class="bg-gray-200 flex-1">
<transition name="slide-fade">
<router-view></router-view>
</transition>
</main>
</div>
原文由 g3tl0st 发布,翻译遵循 CC BY-SA 4.0 许可协议
如果有人仍在寻找这个,这里是使用权利顺风类的解决方案。
我的布局如下所示: