我正在制作一个带有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>

I have attached an image below, I would like those empty columns not to be seen on the sides. Screenshot: Current output screenshot

我曾try 在导航栏组件中放置flex和justine,但只在右侧有一列空栏.

推荐答案

似乎您需要调整组件上的"MaxWidth"props .https://nextui.org/docs/components/navbar#navbar-props

大概是这样的:

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

   ... Navbar Code Here ...

</Navbar>

Css相关问答推荐

Css扩展搜索栏,如何添加图标结束?

如何以Angular 将下拉面板的宽度与其文本框对齐

VueJS3+Vutify中缺少一些CSS类

在主零部件悬停上对子零部件设置Angular 样式

使用高图的背景大小渐变

将鼠标悬停在具有效果的元素上

为什么 CSS Calc() 函数只需要+或-运算符前后有空格

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

使用 React JS 和自定义 CSS 创建 Cookie 横幅

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

整个列的 CSS Grid Margin Top

使用 styled-components,我如何定位组件的子类?

CSS网格使sibling 项目拉伸

图像 3D 悬停效果

纯 CSS/JS 的 SVG 连续向内方形螺旋动画

使用 HTML 和 CSS 滚动表格

什么是 ::content/::slotted 伪元素,它是如何工作的?

范围内的 CSS 未在组件中应用

我如何*真正*证明 HTML+CSS 中的水平菜单?