reactjs 导航栏没有使用nextui获取页面的全部宽度

tf7tbtn2  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(108)

我正在用nextui组件制作一个导航栏,在一个完整的桌面屏幕上,我不能把品牌标志和按钮带到侧边。剩下两个空栏。我附上了下面的代码。

<Navbar onMenuOpenChange={setIsMenuOpen}>
      <NavbarContent>
        <NavbarMenuToggle
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          className="sm:hidden"
        />
        <NavbarBrand>
          <p className="font-bold font-inter text-inherit">Brand</p>
        </NavbarBrand>
      </NavbarContent>

      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <Link color="foreground" href="#">
            Features
          </Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">
            Customers
          </Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">
            Integrations
          </Link>
        </NavbarItem>
      </NavbarContent>
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <Link color="foreground" href="#">Login</Link>
        </NavbarItem>
        <NavbarItem>
          <Button as={Link} href="#" variant="flat">
            Sign Up
          </Button>
        </NavbarItem>
      </NavbarContent>

我附上了下面的图像,我想那些空列不被看到的两侧。截图:

我尝试在导航栏组件中放置flex和justify,但只有右侧有一个空列。

cld4siwp

cld4siwp1#

似乎你需要调整组件上的“maxWidth”属性。https://nextui.org/docs/components/navbar#navbar-props
大概是这样的:

<Navbar maxWidth="full" onMenuOpenChange={setIsMenuOpen}>

   ... Navbar Code Here ...

</Navbar>

相关问题