第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Tpyography 用網(wǎng)格分成工具欄中的第二行

Tpyography 用網(wǎng)格分成工具欄中的第二行

aluckdog 2023-09-28 17:14:40
我正在創(chuàng)建一個(gè)應(yīng)用欄,我想要標(biāo)題(Lorem ipsum 文本)在左側(cè),按鈕在右側(cè),我編寫了這段代碼來做到這一點(diǎn),但這樣看來我有某種最大寬度,之后文本就會(huì)中斷進(jìn)入第二行,我希望它在一行中,這是代碼:<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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

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

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

  • 您可以將其分成 2 個(gè)網(wǎng)格 -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


查看完整回答
反對 回復(fù) 2023-09-28
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號