Question

关于在React中使用卡片的几个问题。

首先，基于以下代码，为什么这4张卡不能彼此相邻？我忘了申请某件事吗？

import React, { Component } from "react";
import { Container, Card, CardText, CardImg, CardBody, CardLink,
  CardTitle, Button, Col, Row } from 'reactstrap';

class Users extends Component {
  render() {
    return (
      <div>
        <Container>
          <Row>
            <Col>
              <Card>
              <CardImg top width="25%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
              <CardBody>
                <CardTitle>Need Help Finding Customers?</CardTitle>
                <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                <Button>Button</Button>
              </CardBody>
              </Card>
            </Col>
            <Col>
              <Card>
              <CardImg top width="25%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
              <CardBody>
                <CardTitle>Get help with a Moneyball activity!</CardTitle>
                <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                <Button>Button</Button>
              </CardBody>
              </Card>
            </Col>
            <Col>
              <Card>
              <CardImg top width="25%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
              <CardBody>
                <CardTitle>Request Moneyball in-person training</CardTitle>
                <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                <Button>Button</Button>
              </CardBody>
              </Card>
            </Col>
            <Col>
              <Card>
              <CardImg top width="25%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
              <CardBody>
                <CardTitle>Register for an Immerse Event</CardTitle>
                <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                <Button>Button</Button>
              </CardBody>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Users;

我得到的是：

此外，通过我在网上看到的例子，我喜欢卡的概念，但更喜欢让整张卡像一个大按钮。在React中，有什么最佳实践呢？

非常感谢。

Answer 1

“grid”系统（Container，Row，Col）的元素似乎在reactstrap的文档中缺失，但是快速查看Col组件的代码我会说你需要为它添加一个属性所需的大小。

这样的事情：

<Col lg="2">

用于'col-lg-2'bootstrap类，或

<Col sm="true">

为'col-sm'类，没有数字。

与反应堆反应的BS4卡？

1 个答案: