編輯：這是唯一有問題的頁面。同一網站的其他頁面顯示正確。我用 React 和 Material-UI 制作了一個網頁。頂部組件是Grid和Container。它在桌面上看起來不錯，但在移動設備上......好吧......這是屏幕的一側：創建了額外的空間（淺灰色），圖片和卡片超出了屏幕最大寬度。標題（藍色）和背景（淺藍色）具有正確的寬度（屏幕的寬度）。我正在使用Grid和Container。這是包含卡片的根組件：<Grid container spacing={0} direction="row" justify="space-around" alignItems="center" style={{ minHeight: "20vh" }}> ....這是另一個改變寬度的容器：<Container maxWidth="lg" style={{ marginBottom: "5vh" }}> <Paper style={{ padding: 20 }}> <Grid container spacing={0} direction="column" justify="flex-start" alignItems="center" > ....正確顯示的標題只是一個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", }, ...造成這種溢出的原因可能是什么？我一直在閱讀文檔，但找不到該錯誤。
1 回答
Smart貓小萌
TA貢獻1911條經驗 獲得超7個贊
我已經解決了 這里有兩個問題。
問題一：
作為卡片根組件的一個網格組件被指定為container但不是item。
問題1說明：
由于卡片位于Grid父組件的內部，因此還有一個item. 在我將所有內部Grid至少有一個的組件指定Grid為 a container，并將容器Grid內的所有組件Grid直接或間接指定為父組件，因為item它幾乎可以工作。
問題2：
卡片內的介質尺寸和卡片邊距的組合對于屏幕來說太大。解決方案是更改margin和width單位。
解釋問題2：
卡片現在有這個CSS：
cards: {
margin: "5vw",
marginBottom: "0vh",
},
media: {
height: "35vh",
width: "45vw",
},
問題出在單位上。我使用margin: '5vh'的邊距是根據 vierport 的高度計算的。在高度大于寬度的視口（移動設備）中，高度的一小部分仍然大于寬度。
- 1 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消