使用Material-UI嵌套网格布局

Question

我遇到了使用material-ui grid的问题，我想要渲染一行并拥有两列。

import React from 'react';
import DefaultLayout from '../layouts/default';
import Grid from '@material-ui/core/Grid';

class profile extends React.Component {
  render() {

    return (
    <React.Fragment>
      <Grid container spacing={8}>
      <Grid item xs={12} style={{backgroundColor: 'blue', height: '250px'}}></Grid>
      <Grid item xs={12} style={{backgroundColor: 'grey', height: '250px'}}></Grid>

      {/* Form two columns with next row*/}

      <Grid container={'true'} item sx={12}>
        <Grid item={'true'} xs={6} md={8} style={{backgroundColor: 'green', height: '50px'}}></Grid>
        <Grid item={'true'} xs={6} md={4} style={{backgroundColor: 'orange', height: '50px'}}></Grid>
      </Grid>
    </Grid> 
  </React.Fragment>
)}}

module.exports = profile;

目前，它正在渲染：

我希望橙色和绿色行成为同一行上的两列。并排显示。

有人能解释一下我的代码有什么问题吗？

@material-ui/core: ^3.9.2

react: ^16.7.0

- adamUpchurch

Answer 1

我认为问题在于你的前两个'rows'标记为xs={12}，将占用整个页面宽度。我正在逐渐转向不使用bootstrap (天啊...谁知道react-bootstrap会这么有bug呢!)，这需要一些适应...但如果你还没有想出来，试试这个？

import React from 'react';
import DefaultLayout from '../layouts/default';
import Grid from '@material-ui/core/Grid';

class profile extends React.Component {
  render() {

    return (
    <React.Fragment>
      <Grid container spacing={8}>
      //the below columns will be full width! I've changed the 12 to 6
      <Grid item xs={6} style={{backgroundColor: 'blue', height: '250px'}}></Grid>
      <Grid item xs={6} style={{backgroundColor: 'grey', height: '250px'}}></Grid>

      {/* Form two columns with next row*/}

      <Grid container={'true'} item sx={12}>
        <Grid item={'true'} xs={6} md={8} style={{backgroundColor: 'green', height: '50px'}}></Grid>
        <Grid item={'true'} xs={6} md={4} style={{backgroundColor: 'orange', height: '50px'}}></Grid>
      </Grid>
    </Grid> 
  </React.Fragment>
)}}

module.exports = profile

我还没有测试过，但应该可以工作？

- Union In Design

---

任何时候，当你有一个属性被设置为true时，你可以省略该值。代替写成<Grid item={'true'}>，只需使用<Grid item>即可。 - Jesse Novotny

Answer 2

您需要使用 GridList 和 GridListTitle。

请尝试使用以下代码以获得所需的输出

import React from 'react';
import DefaultLayout from '../layouts/default';
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";

class profile extends React.Component {
  render() {

    return (
    <React.Fragment>
      <GridList cols={1}>
          <GridListTile style={{backgroundColor: 'green', height: '50px'}}>

          </GridListTile>
          <GridListTile style={{backgroundColor: 'orange', height: '50px'}}>

          </GridListTile>
      </GridList>
      <GridList cols={2}>
          <GridListTile style={{backgroundColor: 'green', height: '50px'}}>

          </GridListTile>
          <GridListTile style={{backgroundColor: 'orange', height: '50px'}}>

          </GridListTile>
      </GridList>

  </React.Fragment>
)}}

module.exports = profile;

- Hemadri Dasari

---

你能展示一下如何设置列的自定义宽度吗？目前它会生成等宽的列。 - Pavindu