全宽材料-UI网格无法正常工作

Question

我想了解Material-UI @ next网格布局系统.

我的目标是让两张纸在整个宽度屏幕上展开,并在屏幕变小到一张纸时断开.该文档包含以下代码段:

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12}>
        <Paper>xs=12</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Paper>xs=6 sm=3</Paper>
      </Grid>
    </Grid>
  </Container>

这导致以下结果:

然后我修改了代码,试图实现我只有两篇论文的目标,如下:

  <Container>
    <Grid container spacing={24}>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>xs=12 sm=6</Paper>
      </Grid>
    </Grid>
  </Container>

但正如你所看到的,这导致了两篇没有整个屏幕的论文:

有人能指出一个工作示例片段,它允许我有两个占据整个宽度的元素吗？

Answer 1

我怀疑Container组件引起了你的问题.由于您尚未链接其实现,请参阅下面的示例,了解您想要的实例.

由于Material使用flexbox,因此他们使用属性flexGrow

flex-grow CSS属性指定flex项的flex增长因子.它指定项目应占用的Flex容器内的空间量.flex项的flex增长因子是相对于flex-container中其他子项的大小.

这是控制网格中元素增长的属性.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
        </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);

Answer 2

最佳实践是测试所有断点并指定每个屏幕宽度的空间分配。

<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>

</Grid>

xs，特小 0px

sm，小：600px

MD，中：960px

LG，大：1280 像素。

xl，超大：1920px

https://material-ui.com/customization/breakpoints/

xs定义组件将使用的网格数。它适用于优先级最低的所有屏幕尺寸。

sm定义组件将使用的网格数。如果不被覆盖，它适用于 sm 断点和更宽的屏幕。

md定义组件将使用的网格数。如果不被覆盖，它适用于 md 断点和更宽的屏幕。

（等等）更多信息请参见： https: //material-ui.com/api/grid/