0

关于在 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 中，有哪些最佳实践？

非常感谢。

4

1 回答 1

0

reactstrap 的文档中似乎缺少“网格”系统的元素（Container、Row、Col），但快速查看 Col 组件的代码，我会说您需要添加一个所需大小的属性。

像这样的东西：

<Col lg="2">

对于“col-lg-2”引导类，或

<Col sm="true">

对于 'col-sm' 类，没有编号。

于 2018-01-09T08:13:23.437 回答