如何使 Appbar 内容不会在较大的显示器上拉伸到两侧

Question

我想将我的 Appbar 内容居中，这样在较大的显示器上它就不会散布到屏幕的两侧。有 images 它的外观与我希望它的外观。

问题在于，在较小的屏幕上，Appbar 和页面内容都适合屏幕，但在较大的显示器上，Appbar 内容继续展开，而页面内容保持居中。所以我希望 Appbar 保持全宽，同时其内容与页面内容保持在同一位置 - 正如您在第二个屏幕中看到的那样。

我的页面代码：

<Box sx={{ display: "flex" }}>
  <CssBaseline />
  <AppBar
    position="fixed"
    sx={{
      marginTop: "10px",
      width: `100%`,
    }}
  >
    <Toolbar>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        edge="start"
        sx={{ mr: 2, display: { sm: "none" } }}
      >
        <MenuIcon />
      </IconButton>
      <Box
        sx={{
          borderBottom: 1,
          borderColor: "divider",
          mr: 2,
          display: { xs: "none", sm: "block", md: "block" },
        }}
      >
        <Tabs
          aria-label="basic tabs example"
          TabIndicatorProps={{
            style: {
              background: "#ffffff",
            },
          }}
        >
         // MY TABS 
        </Tabs>
      </Box>
      <div className={classes.alignRight}>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="right"
        >
          <LogoutRoundedIcon />
        </IconButton>
      </div>
    </Toolbar>
  </AppBar>
  <Box
    component="nav"
    sx={{ width: { sm: 0 }, flexShrink: { sm: 0 } }}
    aria-label="mailbox folders"
  >
  </Box>
  {/* Page content */}
  <Box
    component="main"
    sx={{
      flexGrow: 1,
      p: 3,
    }}
  >
    // MY CONTENT
  </Box>
</Box>

将 Appbar 位置标记更改为 position="static" 会将其更改为所需的宽度，但我只想要该宽度的内容。

Answer 1

<AppBar position="static">
  <Toolbar
    sx={{
      width: "100%",
      maxWidth: 600,
      mx: "auto"
    }}
  >

设置一个maxWidth来限制大屏幕的宽度
将 width 设置为 100% 以在上述 maxWidth 限制内扩展内容宽度。
将 margin 左右设置为 auto 以使 Toolbar 本身在 Appbar

现场演示

Answer 2

您的 Appbar 的 width 设置为 100% — 这意味着它将占据其弹性父元素 Box 的所有 space，您需要给它一个固定的宽度或设置它可以拉伸的最大限制。

以下是一些可以解决您的问题的建议：

为每个媒体查询提供 Appbar 固定宽度，这样它就不会根据屏幕尺寸扩展。
给你的 Appbar 一个动态宽度和一个偏移量，比如 width=calc(75vw + 2rem)，请注意 75vw 可以代替 75%，因为父组件占据 100% 的宽度视图。
在您的 Box 父组件上使用 justifyContent : "space-around"，以获得所需的结果。

编辑：NearHuscarl 的解决方案似乎更好。

如何使 Appbar 内容不会在较大的显示器上拉伸到两侧

How to make Appbar content not stretch to sides on larger displays

appbar

reactjs

material-ui

现场演示