我正在学习Reaction和Tailwincss.我目前正试图建立一个简单的投资组合与首页和其他一些页面的导航栏.我已经为我的首页创建了框架,但当我添加导航栏(页眉)时,内容在高度和宽度上都比屏幕大,这在底部和右侧增加了空格.
我试过摆弄h-screen
/w-screen
和h-full
/w-full
标签,但我什么都做不了.
我的App.js
看起来是这样的:
import React from "react";
import About from "./components/About";
import Navbar from "./components/Navbar";
export default function App() {
return (
<main className="m-0 w-screen h-screen bg-gray-50 body-font text-gray-600 font-display">
{/* <Navbar /> <-- Adding this causes the issue */}
<About />
</main>
);
}
我的Navbar.js
组件如下所示:
import React from "react";
export default function Navbar() {
return (
<header className="bg-gray-50 md:sticky top-0 z-10">
<div className="container mx-auto flex p-5 flex-col items-end">
<nav className="md:mr-4 md:py-1 md:pl-4 flex flex-wrap items-center text-base justify-center">
<a href="#projects" className="mr-5 hover:text-blue-500">
Past Work
</a>
<a href="#skills" className="mr-5 hover:text-blue-500">
Skills
</a>
<a href="#testimonials" className="mr-5 hover:text-blue-500">
Testimonials
</a>
</nav>
</div>
</header>
);
}
我的首页(About.js
)是这样的:
import React from "react";
export default function About() {
return (
<section id="about" className="h-full w-full">
<div className="container h-full w-full mx-auto my-auto flex px-10 py-20 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-5xl text-4xl mb-4 font-extrabold text-blue-500">
NAME HERE
</h1>
<p className="mb-8 leading-relaxed">
Developer
</p>
<div className="flex flex-col justify-center">
<a href="mailto:mail@xxx.xxx">mail@xxx.xxx</a>
</div>
</div>
</div>
</section>
);
}
感谢大家的帮助,谢谢!