css - Reactjs Bootstrap 网格

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>
);