如何在TailwindCSS移动端将Connect按钮移至Discord按钮前

要在移动端将Connect按钮移至右侧并放在Discord按钮前方，你可以通过调整DOM结构结合Tailwind响应式类实现，同时保留桌面端原有布局：

修改后的代码 #

export function SiteHeader() {
  return (
    <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 max-w-screen-2xl items-center">
        <MainNav />
        <MobileNav />
        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          {/* 桌面端显示的Connect按钮 */}
          <div className="hidden md:block w-full flex-1 md:w-auto md:flex-none">
            <Button>Connect</Button>
          </div>
          <nav className="flex items-center">
            {/* 移动端显示的Connect按钮 */}
            <div className="block md:hidden mr-2">
              <Button>Connect</Button>
            </div>
            <Link
              href=""
              target="_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.discord className="h-4 w-4" />
                <span className="sr-only">Discord</span>
              </div>
            </Link>
            <Link
              href=""
              target="_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.twitter className="h-3 w-3 fill-current" />
                <span className="sr-only">Twitter</span>
              </div>
            </Link>
            <ModeToggle />
          </nav>
        </div>
      </div>
    </header>
  );
}

调整说明 #

• 拆分Connect按钮为两个实例：一个仅在**桌面端（md及以上）显示（hidden md:block），维持原有布局位置；另一个仅在移动端（md以下）**显示（block md:hidden），放在nav内部Discord按钮前方。
• 给移动端的Connect按钮添加mr-2类，保持和Discord按钮的间距，与原有布局的space-x-2效果一致。
• 该方案不会破坏桌面端布局逻辑，同时精准满足移动端的位置需求。

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