英文:
NextJs Tailwind header styling issue
问题
I have a Next.js 项目并使用 Tailwind 进行样式设计。
期望情况：
-
大屏幕（桌面或笔记本电脑）应该在左侧显示标志，并在右侧显示联系信息（这部分正常工作）。
-
较小的屏幕（手机）应该只显示标志，并且应该居中显示。
问题：
- 当屏幕尺寸较小时，或者我调整浏览器窗口以表示较小的屏幕时，标志没有移动到标题的中心。而且联系信息仍然显示。
英文:
I have Nextjs project and I am using tailwind. I have an issue with styling.
expected:
-
large screen (desktop or laptop) should show logo to the left and to the right contact information should show. (this is working as expected)
-
smaller screen (mobile phone) should show only logo and it should be centered
issue:
- when the screen size is smaller or I adjust the browser screen to represent a smaller screen the logo does not shift to the center of the header. Also the contact information still show
import React from "react";
import Image from "next/image";
import { ShoppingBasket } from "lucide-react";
const AppHeader: React.FC = () => {
return (
<header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]">
<div className="container mx-auto px-4 flex justify-between items-center h-full">
<div className="flex items-center">
<Image
src="/path-to-your-logo.png"
alt="Logo"
width={190}
height={57}
className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]"
/>
</div>
<div className="sm:hidden md:flex items-center space-x-4">
<div className="flex flex-col font-medium text-white font-montserrat">
<span style={{ fontSize: "12px" }}>1503 Kelly's.</span>
<span style={{ fontSize: "12px" }}>Clove SC 78620</span>
<span style={{ fontSize: "12px" }}>(704) 777-7777</span>
<span style={{ fontSize: "12px" }}>2131@gmail.com</span>
</div>
<div className="border-l h-[48px]"></div>
<ShoppingBasket className="text-white h-8 w-8" />
</div>
</div>
</header>
);
};
export default AppHeader;
答案1
得分: 0
Remove the sm: prefix from sm:hidden from the <div> that encapsulates the right contact information so that the right contact information will have display: none applied until the md: breakpoint.
To center the logo, apply justify-items: center via the justify-center utility class, and then apply justify-items: space-between for screens larger than the md breakpoint by adding the md:justify-between utility class.
英文:
Remove the sm: prefix from sm:hidden from the <div> that encapsulates the right contact information so that the right contact information will have display: none applied until the md: breakpoint.
To center the logo, apply justify-items: center via the justify-center utility class, and then apply justify-items: space-between for screens larger than the md breakpoint by adding the md:justify-between utility class:
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
const ShoppingBasket = () => 'ShoppingBasket';
const AppHeader = () => {
return (
<header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]">
<div className="container mx-auto px-4 flex justify-center items-center h-full md:justify-between">
<div className="flex items-center">
<img
src="https://picsum.photos/190/57"
alt="Logo"
width={190}
height={57}
className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]"
/>
</div>
<div className="hidden md:flex items-center space-x-4">
<div className="flex flex-col font-medium text-white font-montserrat">
<span style={{ fontSize: "12px" }}>1503 Kelly's.</span>
<span style={{ fontSize: "12px" }}>Clove SC 78620</span>
<span style={{ fontSize: "12px" }}>(704) 777-7777</span>
<span style={{ fontSize: "12px" }}>2131@gmail.com</span>
</div>
<div className="border-l h-[48px]"></div>
<ShoppingBasket className="text-white h-8 w-8" />
</div>
</div>
</header>
);
};
ReactDOM.createRoot(document.getElementById('app')).render(<AppHeader/>);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="app"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论