網格項目在列而不是行中Material-UI

Question

我試圖有一個連續有3個項目的網格。 但是，我的代碼中的網格垂直連續，每行只有一個項目。 每個網格項目中也都有一個圖像。 如何更改它，所以連續有3個網格項。 這是我的代碼：

Grid.js：

const styles = theme => ({

  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },


  paper: {
    margin: "1%",
    padding: "1%",
    width: "80%"
  },
      });

class GridListings extends Component {
  componentDidMount() {
    this.props.getPosts();
  }

  render() {
    const { classes } = this.props;
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <div> loading</div>;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Typography align="center" variant="display2">
            Sneaker Listings
          </Typography>

          {postContent}
        </Paper>
      </div>
    );
  }
}

postfeed.js：

class PostFeed extends Component {
  render() {
    const { posts } = this.props;

    return posts.map(post => <ListingPost key={post._id} post={post} />);
  }
}

ListingPost.js：

const styles = theme => ({

  root: {
    flexGrow: 1,
    maxWidth: "30%",
    padding: theme.spacing.unit * 2
  },
  image: {
    maxWidth: "100%",
    maxHeight: "100%"
  },
  img: {
    margin: "auto",
    display: "block",
    maxWidth: "100%",
    maxHeight: "100%"
  }
});

class ListingPost extends Component {
  onDeleteClick(id) {
    console.log(id);
  }

  render() {
    const { post, auth, classes } = this.props;

    return (
      <Paper className={classes.root}>
        <Grid container spacing={16} direction="row">
          <Grid item>
            <ButtonBase className={classes.image}>
              <img
                className={classes.img}
                alt="complex"
                src={post.productImage}
              />
            </ButtonBase>
          </Grid>
          <Grid item xs={12} sm container direction="row">
            <Grid item xs container spacing={16}>
              <Grid item xs>
                <Typography gutterBottom variant="subheading">
                  Shoes
                </Typography>
                <Typography gutterBottom>Size:12</Typography>
                <Typography color="textSecondary">Brand New</Typography>
              </Grid>
              <Grid item>
                <Typography style={{ cursor: "pointer" }}>Remove</Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subheading">$19.00</Typography>
            </Grid>
          </Grid>
        </Grid>

      </Paper>
    );
  }
}

任何幫助表示贊賞。

Answer 1

您必須使用下面組件中的bootstrap類row 。 試試下面的代碼

PostFeed.js

class PostFeed extends Component {
  render() {
    const { posts } = this.props;
    let postss= [];
    posts.map(post => {
      postss.push(<ListingPost key={post._id} post={post} />);
    });
    return (
      <div className="row">
        {postss}
      </div>
    );
  }
}

要么

在您的grid.js只需添加帶有className row div

<Paper className={classes.paper}>
  <Typography align="center" variant="display2">
    Sneaker Listings
  </Typography>
  <div className="row">
    {postContent}
  </div>
</Paper>