У меня есть эти 5 столбцов, где я хотел, чтобы они были в одной строке. Однако пока вот что у меня получилось:
Как сделать так, чтобы все столбцы были в одной строке?
Я также воссоздал это в своем codeandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j
Ниже приведены коды: коды:
<Container style = {{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx = {{ "& h1": { m: 0 } }}>
<Grid container spacing = {2} justify = "flex-start">
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
<CardContent>
<Stack direction = "row" spacing = {2}>
<Typography variant = {"h6"} gutterBottom>
Column 1
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
<CardContent>
<Stack direction = "row" spacing = {2}>
<Typography variant = {"h6"} gutterBottom>
Column 2
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
<CardContent>
<Stack direction = "row" spacing = {2}>
<Typography variant = {"h6"} gutterBottom>
Column 3
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
<CardContent>
<Stack direction = "row" spacing = {2}>
<Typography variant = {"h6"} gutterBottom>
Column 4
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
<CardContent>
<Stack direction = "row" spacing = {2}>
<Typography variant = {"h6"} gutterBottom>
Column 5
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Container>
Вы можете использовать wrap = "nowrap"
, чтобы элемент оставался в том же ряду.
<Grid container wrap = "nowrap" sx = {{ flexDirection: { xs: "column", md: "row" }}} spacing = {2} justify = "flex-start">
<Grid item xs = {12} sm = {6} md = {4} lg = {3}>
<Card>
.
.
.
</Card>
</Grid>
</Grid>
Попробуйте использовать sx = {{ flexDirection: { xs: "column", md: "row" }}}
но он больше не отвечает, если он для маленьких экранов