主页 / coding / 问题 / 77747152
Accepted
Taha Ali
Asked: 2024-01-02 23:53:05 +0800 CST

如何在 tailwindcss 中更改小型设备中的项目位置

  • 772

这是我的代码。但在移动设备上，“连接”按钮位于左侧，如下图所示： 左侧连接按钮。

我想将移动设备上的“连接”按钮移至“discod”按钮之前的右侧。

这是我的代码：

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">
          <div className="w-full flex-1 md:w-auto md:flex-none">
            <Button>Connect</Button>
          </div>
          <nav className="flex items-center">
            <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>
  );
}
css

1 个回答

  1. Best Answer

    改变

    <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
  <div className="w-full flex-1 md:w-auto md:flex-none">

    到

    <div className="flex flex-1 items-center space-x-2 justify-end">
  <div className="w-auto flex-none">

    我们将md:类转置为没有变体。这意味着它们将适用于所有视口，即现在包括“移动”。同时，我们删除冲突的类。

    <script src="https://cdn.tailwindcss.com/3.4.0"></script>

<header class="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
  <div class="container flex h-14 max-w-screen-2xl items-center">
    <MainNav>MainNav</MainNav>
    <MobileNav>MobileNav</MobileNav>
    <div class="flex flex-1 items-center space-x-2 justify-end">
      <div class="w-auto flex-none">
        <Button>Connect</Button>
      </div>
      <nav class="flex items-center">
        <Link
          href=""
          target="_blank"
          rel="noreferrer"
        >
          <div
            class="w-9 px-0"
          >
            <Icons.discord class="h-4 w-4">Icons.discord</Icons.discord>
            <span class="sr-only">Discord</span>
          </div>
        </Link>
        <Link
          href=""
          target="_blank"
          rel="noreferrer"
        >
          <div
            class="w-9 px-0">
            <Icons.twitter class="h-3 w-3 fill-current">Icons.twitter</Icons.twitter>
            <span class="sr-only">Twitter</span>
          </div>
        </Link>
        <ModeToggle>ModeToggle</ModeToggle>
      </nav>
    </div>
  </div>
</header>

    • 1

相关问题