Question

我有3个网格项（请参见下面的代码）；在移动设备上，我希望左右网格项目显示在中间网格项目上方，在平板电脑视图上，我希望它们显示在中间网格项目上方，彼此相邻。我该如何实现？

我正在使用：https://material-ui.com/components/grid/

      <Grid item xs={12} md={3} sm={6}>
        <ProductList
          productgroup={this.state.product.group}
          productnumber={this.state.product.number}
          handleProductSelect={this.handleProductSelect}
          productlist={this.props.productlist}
          theme={this.props.selectedTheme} />
      </Grid>

      <Grid item xs={12} md={6} sm={12}>
        <TableProduct product={this.state.product} parameters={this.state.parameters} />
      </Grid>

      <Grid item xs={12} md={3} sm={6}>
        <ParameterSelect product={this.state.product} parameters={this.state.parameters} onChange={this.handleInputChange} />
      </Grid>

    </Grid>

Answer 1

最后，我滚动了很多堆栈溢出页面，最终找到了答案。这就是我的实现方式：）

  <Grid container direction="row" justify="center" alignItems="center" spacing={3} className={classes.gridWidth}>
          <Box clone order={{ xs: 1, sm: 1, md: 1 }}>
          <Grid item xs={12} md={3} sm={6}>
            <ProductList
              productgroup={this.state.product.group}
              productnumber={this.state.product.number}
              handleProductSelect={this.handleProductSelect}
              productlist={this.props.productlist}
              theme={this.props.selectedTheme} />
            </Grid>
          </Box>
          <Box clone order={{ xs: 3, sm: 3, md: 2 }}>
            <Grid item xs={12} md={6} sm={12}>
            <TableProduct product={this.state.product} parameters={this.state.parameters} />
            </Grid>
          </Box>
          <Box clone order={{ xs: 2, sm: 2, md: 3}}>
          <Grid item xs={12} md={3} sm={6}>
            <ParameterSelect product={this.state.product} parameters={this.state.parameters} onChange={this.handleInputChange} />
            </Grid>
          </Box>
        </Grid>

material-ui响应式网格：如何在移动设备上将左右列对齐以移动到中间列上方

1 个答案: