实现卡片在React app中无法正常显示

Question

我遇到了Materialise卡的问题反应我希望它们并排显示，而是将它们垂直显示在另一个之上。任何帮助将不胜感激。

 {this.state.players.length ? (
        <Row className="basketball-BG">
    <Col m={3}>
        <div className="card-content">

                <PlayersList>
                    {this.state.players.map(player => (
                        <PlayersInfo key={player._id}>

                                <Card className="card small'"
                                      header={<CardTitle ></CardTitle>}>
                                    <a className="player-card" href={"/players/" + player._id}>
                                    <div className="card-content">
                                        <h4>
                                            {player.lName +" "}
                                            {player.fName}
                                        </h4>
                                        <p>
                                            {player.jersey}
                                        </p>
                                        <p>
                                            {player.position}
                                        </p>
                                    </div>
                                    </a>
                                    <DeleteBtn onClick={() => this.deletePlayer(player._id)} />
                                </Card>



                        </PlayersInfo>
                    ))}
                </PlayersList>

        </div>
    </Col>
        </Row>
    ) : (
        <h3 className="center">You Dont Have any Players yet Add them to the roster</h3>
    )}

Answer 1

您可以使用flex layouts

// in your component
<PlayersList class='row-wise-spread'>
</PlayersList>

在css文件中

.row-wise-spread {
  display: flex;
  flex-direction: row;
}