編輯：這是唯一有問(wèn)題的頁(yè)面。同一網(wǎng)站的其他頁(yè)面顯示正確。我用 React 和 Material-UI 制作了一個(gè)網(wǎng)頁(yè)。頂部組件是Grid和Container。它在桌面上看起來(lái)不錯(cuò)，但在移動(dòng)設(shè)備上......好吧......這是屏幕的一側(cè)：創(chuàng)建了額外的空間（淺灰色），圖片和卡片超出了屏幕最大寬度。標(biāo)題（藍(lán)色）和背景（淺藍(lán)色）具有正確的寬度（屏幕的寬度）。我正在使用Grid和Container。這是包含卡片的根組件：<Grid container spacing={0} direction="row" justify="space-around" alignItems="center" style={{ minHeight: "20vh" }}> ....這是另一個(gè)改變寬度的容器：<Container maxWidth="lg" style={{ marginBottom: "5vh" }}> <Paper style={{ padding: 20 }}> <Grid container spacing={0} direction="column" justify="flex-start" alignItems="center" > ....正確顯示的標(biāo)題只是一個(gè)AppBar.頂部溢出的圖像返回：<div className={classes.heroContent}> <Container maxWidth="md" align="center"> <Grid container direction="column" justify="flex-end" alignItems="center" > ...是classes.heroContent： heroContent: { backgroundImage: `url(${grupo})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", padding: theme.spacing(8, 0, 8), minHeight: "20vh", }, ...造成這種溢出的原因可能是什么？我一直在閱讀文檔，但找不到該錯(cuò)誤。
1 回答
Smart貓小萌
TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊
我已經(jīng)解決了 這里有兩個(gè)問(wèn)題。
問(wèn)題一：
作為卡片根組件的一個(gè)網(wǎng)格組件被指定為container但不是item。
問(wèn)題1說(shuō)明：
由于卡片位于Grid父組件的內(nèi)部，因此還有一個(gè)item. 在我將所有內(nèi)部Grid至少有一個(gè)的組件指定Grid為 a container，并將容器Grid內(nèi)的所有組件Grid直接或間接指定為父組件，因?yàn)閕tem它幾乎可以工作。
問(wèn)題2：
卡片內(nèi)的介質(zhì)尺寸和卡片邊距的組合對(duì)于屏幕來(lái)說(shuō)太大。解決方案是更改margin和width單位。
解釋問(wèn)題2：
卡片現(xiàn)在有這個(gè)CSS：
cards: {
margin: "5vw",
marginBottom: "0vh",
},
media: {
height: "35vh",
width: "45vw",
},
問(wèn)題出在單位上。我使用margin: '5vh'的邊距是根據(jù) vierport 的高度計(jì)算的。在高度大于寬度的視口（移動(dòng)設(shè)備）中，高度的一小部分仍然大于寬度。
- 1 回答
- 0 關(guān)注
- 157 瀏覽
添加回答
舉報(bào)
0/150
提交
取消