0
220
ViewsCómo deshabilitar la acumulación de elementos de MUI Grid cuando el ancho de la ventana es inferior a 600 px
Estoy usando el componente MUI Grid para hacer un diseño. Coloqué dos elementos de cuadrícula uno al lado del otro y uno debajo. Sin embargo, cuando cambio el tamaño de la ventana y el ancho se vuelve más pequeño que 600px , los dos elementos de la cuadrícula uno al lado del otro se apilarán. ¿Alguien sabe dónde puedo deshabilitar los dos elementos de cuadrícula que se apilan con un ancho de ventana de 600px ?
1 answers
Answer question0
Puede ver los valores de punto de interrupción predeterminados aquí para saber qué es xs o sm . En el elemento de Grid , xs={12} sm={6} significa que cuando la pantalla es más pequeña que sm ( 600px ), el elemento de cuadrícula abarca 12 columnas (100 % de ancho), cuando es más pequeño que md y más grande que xs , el elemento de cuadrícula abarca 6 columnas (50% de ancho)
<Grid container spacing={2}> <Grid item xs={12} sm={6}> <Item>xs=12 sm=6</Item> </Grid> <Grid item xs={12} sm={6}> <Item>xs=12 sm=6</Item> </Grid> <Grid item xs={12}> <Item>xs=12</Item> </Grid> </Grid> Editar: para deshabilitar el apilamiento cuando el ancho es menor a 600px :
<Grid container spacing={2}> <Grid item xs={6}> <Item>xs=6</Item> </Grid> <Grid item xs={6}> <Item>xs=6</Item> </Grid> <Grid item xs={12}> <Item>xs=12</Item> </Grid> </Grid> 