亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Tpyography 用網格分成工具欄中的第二行

Tpyography 用網格分成工具欄中的第二行

aluckdog 2023-09-28 17:14:40
我正在創建一個應用欄,我想要標題(Lorem ipsum 文本)在左側,按鈕在右側,我編寫了這段代碼來做到這一點,但這樣看來我有某種最大寬度,之后文本就會中斷進入第二行,我希望它在一行中,這是代碼:<AppBar position="fixed">  <Toolbar>    <Typography variant="h5">Lorem Ipsum Lorem Ipsum</Typography>    <Grid container item justify="flex-end" direction="row">      <Button variant="contained" className={classes.navbarBtn}>        {b1}      </Button>      <Button variant="contained" className={classes.navbarBtn}>        {b2}      </Button>    </Grid>  </Toolbar></AppBar>;
查看完整描述

1 回答

?
波斯汪

TA貢獻1811條經驗 獲得超4個贊

Toolbardisplay: flex。因此,其子級(TypographyGrid本例中)的寬度考慮了這一點。

現在,<Grid container/>width: 100%占用了所有可用空間。

為了只為按鈕容器提供所需的空間,

  • 您可以將其分成 2 個網格 -itemcontainer。

  • Typography flex-grow: 1.

const useStyles = makeStyles(() => ({

  h5: {

    flexGrow: 1

  }

}));


function App() {

  const classes = useStyles();

  return (

    <AppBar position="fixed">

      <Toolbar>

        <Typography className={classes.h5} variant="h5">

          Lorem Ipsum Lorem Ipsum

        </Typography>

        <Grid item>

          <Grid container item justify="flex-end" direction="row">

            <Button variant="contained">b1</Button>

            <Button variant="contained">b2</Button>

          </Grid>

        </Grid>

      </Toolbar>

    </AppBar>

  );

}


https://codesandbox.io/s/material-ui-appbar-flexbox-9x8l4


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 100 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號