NextJs Tailwind 头部样式问题

huangapple
go评论150阅读模式
英文:

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
  1. import React from "react";
  2. import Image from "next/image";
  3. import { ShoppingBasket } from "lucide-react";
  5. const AppHeader: React.FC = () => {
  6.   return (
  7.     <header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]">
  8.       <div className="container mx-auto px-4 flex justify-between items-center h-full">
  9.         <div className="flex items-center">
  10.           <Image
  11.             src="/path-to-your-logo.png"
  12.             alt="Logo"
  13.             width={190}
  14.             height={57}
  15.             className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]"
  16.           />
  17.         </div>
  18.         <div className="sm:hidden md:flex items-center space-x-4">
  19.           <div className="flex flex-col font-medium text-white font-montserrat">
  20.             <span style={{ fontSize: "12px" }}>1503 Kelly's.</span>
  21.             <span style={{ fontSize: "12px" }}>Clove SC 78620</span>
  22.             <span style={{ fontSize: "12px" }}>(704) 777-7777</span>
  23.             <span style={{ fontSize: "12px" }}>2131@gmail.com</span>
  24.           </div>
  25.           <div className="border-l h-[48px]"></div>
  26.           <ShoppingBasket className="text-white h-8 w-8" />
  27.         </div>
  28.       </div>
  29.     </header>
  30.   );
  31. };
  33. 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 &lt;div&gt; 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 -->

  1. const ShoppingBasket = () =&gt; &#39;ShoppingBasket&#39;;
  3. const AppHeader = () =&gt; {
  4.   return (
  5.     &lt;header className=&quot;bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]&quot;&gt;
  6.       &lt;div className=&quot;container mx-auto px-4 flex justify-center items-center h-full md:justify-between&quot;&gt;
  7.         &lt;div className=&quot;flex items-center&quot;&gt;
  8.           &lt;img
  9.             src=&quot;https://picsum.photos/190/57&quot;
  10.             alt=&quot;Logo&quot;
  11.             width={190}
  12.             height={57}
  13.             className=&quot;sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]&quot;
  14.           /&gt;
  15.         &lt;/div&gt;
  16.         &lt;div className=&quot;hidden md:flex items-center space-x-4&quot;&gt;
  17.           &lt;div className=&quot;flex flex-col font-medium text-white font-montserrat&quot;&gt;
  18.             &lt;span style={{ fontSize: &quot;12px&quot; }}&gt;1503 Kelly&#39;s.&lt;/span&gt;
  19.             &lt;span style={{ fontSize: &quot;12px&quot; }}&gt;Clove SC 78620&lt;/span&gt;
  20.             &lt;span style={{ fontSize: &quot;12px&quot; }}&gt;(704) 777-7777&lt;/span&gt;
  21.             &lt;span style={{ fontSize: &quot;12px&quot; }}&gt;2131@gmail.com&lt;/span&gt;
  22.           &lt;/div&gt;
  23.           &lt;div className=&quot;border-l h-[48px]&quot;&gt;&lt;/div&gt;
  24.           &lt;ShoppingBasket className=&quot;text-white h-8 w-8&quot; /&gt;
  25.         &lt;/div&gt;
  26.       &lt;/div&gt;
  27.     &lt;/header&gt;
  28.   );
  29. };
  32. ReactDOM.createRoot(document.getElementById(&#39;app&#39;)).render(&lt;AppHeader/&gt;);

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js&quot; integrity=&quot;sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js&quot; integrity=&quot;sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  5. &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月11日 00:47:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76877775.html
  • next.js
  • next.js13
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定