Reactjs boostrap网格

Question

我正在学习React，我在使用bootstrap grid / reactstrap时遇到了一些麻烦。不知何故，当我使用网格系统时，我得到的是垂直列，而不是对齐水平列。

Film.js

import React from "react";
import logo from "./ghibli.png";
import { Container, Row, Col } from "reactstrap";
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button } from 'reactstrap';

const Films = props => (
  <Container>
    <Row>
      <Col md= "3">
      <Card>
        <CardImg top width="100%" src={logo} alt="Card image cap" />
        <CardBody>
          <CardTitle>{props.title}</CardTitle>
          <CardSubtitle>{props.director}</CardSubtitle>
          <CardText>{props.description}</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
      </Col>
    </Row>
  </Container>
);

export default Films;

Answer 1

目前，您只有一列（col）。

只要在一行中添加多列，它们就会开始并排显示，即水平显示。

我对reactjs一无所知，但我怀疑以下代码可能会执行这一操作并连续产生2列：

const Films = props => (
<Container>
    <Row>
        <Col md= "3">
            <Card>
                <CardImg top width="100%" src={logo} alt="Card image cap" />
                <CardBody>
                    <CardTitle>{props.title}</CardTitle>
                    <CardSubtitle>{props.director}</CardSubtitle>
                    <CardText>{props.description}</CardText>
                    <Button>Button</Button>
                </CardBody>
            </Card>
        </Col>
        <Col md= "3">
            <Card>
                <CardImg top width="100%" src={logo} alt="Card image cap" />
                <CardBody>
                    <CardTitle>{props.title}</CardTitle>
                    <CardSubtitle>{props.director}</CardSubtitle>
                    <CardText>{props.description}</CardText>
                    <Button>Button</Button>
                </CardBody>
            </Card>
        </Col>
    </Row>
</Container>
);