TailwindCss固定NavBar
TailwindCss固定NavBar
提问于 2020-02-11 21:02:35
我正在尝试在Tailwind CSS和粘性滚动主页中创建一个Fixed Navigation Bar，但是无论我怎么尝试，我都不能让它工作……
以下是我所取得的成果：
以下是我的代码：
<!-- 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>回答 4
Stack Overflow用户
发布于 2021-03-26 00:32:21
如果有人还在寻找这一点，这里的解决方案是使用权限顺风类。
我的布局如下所示：
<div>
<header class="sticky top-0 z-50"></header>
<main class=relative></main>
<footer></footer>
</div>Stack Overflow用户
发布于 2020-07-23 20:19:58
在Tailwind中使用'Fixed NavBar‘。以下是您开始使用的模板代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Starter Template - Fixed Header : Tailwind Toolbox</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) -->
</head>
<body class="bg-gray-400 font-sans leading-normal tracking-normal">
<!--Nav-->
<nav class="bg-gray-800 p-2 mt-0 fixed w-full z-10 top-0">
<div class="container mx-auto flex flex-wrap items-center">
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
<a class="text-white no-underline hover:text-white hover:no-underline" href="#">
<span class="text-2xl pl-2"><i class="em em-grinning"></i> Brand McBrandface</span>
</a>
</div>
<div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
<li class="mr-3">
<a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
</li>
<li class="mr-3">
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
</li>
<li class="mr-3">
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
</li>
<li class="mr-3">
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Container-->
<div class="container shadow-lg mx-auto bg-white mt-24 md:mt-16 h-screen">
<p>Here you Go!</p>
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-01-05 18:41:32
以下是仅使用Flex box的解决方案。
CodeSandbox link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sticky-header-and-footer-with-tailwind</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="flex flex-col h-screen">
<header class="py-5 bg-gray-700 text-white text-center">
Sticky Header and Footer with Tailwind
</header>
<main class="flex-1 overflow-y-auto p-5">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting,
the 1914 translation by H. Rackham.
</main>
<footer class="py-5 bg-gray-700 text-center text-white">
Tailwind is Awesome ?
</footer>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60169463
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号