使用Next.js和Tailwind无法实现着陆页导航栏响应式问题

你的导航栏在移动端失效的核心问题有两个：一是Logo容器使用固定宽度导致小屏幕溢出，二是右侧按钮组未做响应式折叠，导致布局挤压。以下是修复方案：

关键修复点 #

• 为Logo添加响应式宽度，避免固定尺寸溢出
• 引入移动端折叠菜单（使用shadcn/ui的Sheet组件），在小屏幕隐藏按钮组，改用汉堡菜单触发

修改后的完整代码 #

"use client";

import { Montserrat } from "next/font/google";
import Image from "next/image";
import Link from "next/link";
import { useAuth } from "@clerk/nextjs";
import { Menu } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";

const font = Montserrat({
  weight: "600",
  subsets: ["latin"],
});

export const LandingNavBar = () => {
  const { isSignedIn } = useAuth();
  return (
    <nav className="p-4 bg-transparent flex items-center justify-between w-full">
      {/* Logo：响应式宽度，移动端自适应，大屏固定尺寸 */}
      <Link href="/" className="flex items-center">
        <div className="relative h-[41px] w-full max-w-[365px] mr-4">
          <Image fill alt="logo" src="/fdgfdgs.svg" objectFit="contain" />
        </div>
      </Link>

      {/* 桌面端按钮组：仅在sm及以上屏幕显示 */}
      <div className="hidden sm:flex items-center gap-x-2">
        <Link
          href={isSignedIn ? "/dashboard" : "/sign-in"}
          className="inline-flex items-center px-6 py-3 text-gray-400 bg-transparent rounded-md text-sm hover:text-white"
        >
          Log In
        </Link>
        <Link
          href={isSignedIn ? "/dashboard" : "/sign-up"}
          className="relative inline-flex items-center justify-center p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 rounded-2xl shadow-2xl group w-30 h-10 shadow-inherit"
        >
          <span className="absolute top-0 left-0 w-40 h-40 -mt-10 -ml-3 transition-all duration-700 bg-amber-400 rounded-2xl blur-md ease"></span>
          <span className="absolute inset-0 w-full h-full transition duration-700 group-hover:rotate-180 ease">
            <span className="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-orange-600 rounded-full blur-md"></span>
            <span className="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-red-600 rounded-full blur-md"></span>
          </span>
          <span className="relative text-white">Get started</span>
        </Link>
      </div>

      {/* 移动端汉堡菜单：仅在sm以下屏幕显示 */}
      <Sheet>
        <SheetTrigger className="sm:hidden">
          <Button variant="ghost" size="icon">
            <Menu className="h-6 w-6 text-white" />
          </Button>
        </SheetTrigger>
        <SheetContent side="right">
          <div className="flex flex-col gap-y-6 mt-10">
            <Link
              href={isSignedIn ? "/dashboard" : "/sign-in"}
              className="inline-flex items-center px-6 py-3 text-gray-400 bg-transparent rounded-md text-sm hover:text-white"
            >
              Log In
            </Link>
            <Link
              href={isSignedIn ? "/dashboard" : "/sign-up"}
              className="relative inline-flex items-center justify-center p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 rounded-2xl shadow-2xl group w-full justify-center shadow-inherit"
            >
              <span className="absolute top-0 left-0 w-40 h-40 -mt-10 -ml-3 transition-all duration-700 bg-amber-400 rounded-2xl blur-md ease"></span>
              <span className="absolute inset-0 w-full h-full transition duration-700 group-hover:rotate-180 ease">
                <span className="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-orange-600 rounded-full blur-md"></span>
                <span className="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-red-600 rounded-full blur-md"></span>
              </span>
              <span className="relative text-white">Get started</span>
            </Link>
          </div>
        </SheetContent>
      </Sheet>
    </nav>
  );
};

修复细节说明 #

1. Logo响应式调整：将固定宽度w-[365px]改为w-full max-w-[365px]，确保移动端自适应父容器宽度，大屏保持原尺寸；同时添加objectFit="contain"防止Logo拉伸变形。
2. 按钮组响应式显示：用hidden sm:flex让桌面端按钮组仅在≥640px屏幕显示，移动端隐藏。
3. 移动端折叠菜单：使用shadcn/ui的Sheet组件实现汉堡菜单，点击后从右侧滑出菜单，包含两个导航链接，适配移动端触控操作。
4. 修正链接标签：原代码中使用<a>标签配合Next.js路由会导致页面刷新，改为Link组件保持单页应用特性。

内容的提问来源于stack exchange，提问作者user21841027