无法为反应 js 引导程序居中和空间卡组

Question

我一直在努力寻找适合我页面的卡片。 我基本上是想让 6 张卡片适合我的页面，顶部 3 张，底部 3 张。 我一直在使用卡片组，但似乎无法正确使用 CSS。

我希望它们覆盖大部分屏幕，但它们之间仍有空间。 此外，当我尝试添加 CSS （宽度或填充）时，它会破坏一切，并且由于某种原因我不能同时手动指定宽度和高度，宽度只会覆盖两者。

 <React.Fragment> <CardDeck style={{ display: "flex", flexDirection: "row", padding: "10px", width: "80rem", }} class="mx-auto" className="text-center" > <Card style={{ padding: "10px" }}> <Card.Img variant="top" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> <Card style={{ padding: "10px" }}> <Card.Img variant="top" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> <Card style={{ padding: "10px" }}> <Card.Img variant="top" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> </CardDeck> </React.Fragment>

Answer 1

我最终从 react boostrap 中获得了卡片列组件。 我认为它运作良好； 我仍然不知道它到底在做什么。

 <CardColumns style={{ padding: "25px", }} > {" "} <a style={{ cursor: "pointer" }} onClick={() => { this.props.history.push("/register"); }} > <OverlayTrigger placement="right" delay={{ show: 150, hide: 100 }} overlay={this.renderTooltip(this.props, "registrar")} > <Card> <div class="inner"> <Card.Img variant="top" src="https://espacio.fundaciontelefonica.com/wp-content/uploads/2019/08/block_chain_1100x525-1-1100x550.jpg" /> </div> <Card.Body> <Card.Title>Registrar Datos</Card.Title> <Card.Text> Registra de forma confiable los datos de personas que han sido infectadas por COVID-19. </Card.Text> </Card.Body> </Card> </OverlayTrigger> </a> <a style={{ cursor: "pointer" }} onClick={() => { this.props.history.push("/predict"); }} > <OverlayTrigger placement="right" delay={{ show: 150, hide: 100 }} overlay={this.renderTooltip(this.props, "examen")} > <Card> <div class="inner"> <Card.Img variant="top" src="https://www.paho.org/sites/default/files/styles/flexslider_full/public/hero/2020-03/covid-19-1190x574-2-full.jpg?h=fdc0eb87&itok=CerQCpzv" /> </div> <Card.Body> <Card.Title>Examen Virtual de Covid-19</Card.Title> <Card.Text> De un examen virtual de Covid-19 para ver si hay una probabilidad de que estés infectado. </Card.Text> </Card.Body> </Card> </OverlayTrigger> </a> <a style={{ cursor: "pointer" }} onClick={() => { this.props.history.push("/faq"); }} > <Card> <Card.Body> <Card.Title>Preguntas Frecuentes</Card.Title> <Card.Text> Averigua la información relevante sobre la prevención y tratamiento del nuevo corona virus, dicho por la Organización Mundial de la Salud. </Card.Text> </Card.Body> <Card.Footer> <small className="text-muted"> Actualizado hace 30 minutos </small> </Card.Footer> </Card> </a> <a style={{ cursor: "pointer" }} onClick={() => { this.props.history.push("/groups"); }} > <Card> <div class="inner"> <Card.Img variant="top" src="https://elmontonero.pe/upload/uploads_images/columna_alan_6.jpg" /> </div> <Card.Body> <Card.Title>Grupos de riesgo</Card.Title> <Card.Text> Averigua cuales son los grupos de riesgo ante el Covid-19. </Card.Text> </Card.Body> </Card> </a> </CardColumns>