TailwindCss 固定导航栏

Question

TailwindCss 固定导航栏

g3t*_*0st 16 html javascript css vue.js tailwind-css

我试图创建一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mau*_*uro 37

如果有人仍在寻找这个，这里是使用权限顺风类的解决方案。

我的布局是这样的：

<div>
   <header class="sticky top-0 z-50"></header>
   <main class=relative></main>
   <footer></footer>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ana*_*ant 14

这是仅使用 Flex box 的解决方案。

代码沙盒链接

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Kam*_*ara 6

在 Tailwind 中使用“固定导航栏”。这是您开始使用的模板代码：

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，4 月前
查看次数：	29118 次
最近记录：	4 年，11 月前