全宽 Material-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>

但是正如你所看到的，这会导致两篇论文没有占据整个屏幕：

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

原文由 James 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我怀疑 Container 组件给你带来了问题。由于您尚未链接其实现，请参阅下面的工作示例以了解您想要的内容。

由于 Material 使用 了 flexbox ，它们使用了属性 flexGrow

flex-grow CSS 属性指定弹性项目的弹性增长因子。它指定项目应占用的弹性容器内的空间量。弹性项目的弹性增长因子与弹性容器中其他子项的大小有关。

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

 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);

原文由 Paul McLoughlin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最佳做法是测试所有断点并为每个屏幕宽度指定空间分配。

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

</Grid>

xs, 超小 0px

sm，小：600px

医学博士，中等：960px

lg，大：1280 像素。

xl，超大：1920px

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

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

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

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

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

原文由 Michael Nelles 发布，翻译遵循 CC BY-SA 4.0 许可协议