Reactjs Boostrap Grid

Question

Я изучаю React, и у меня есть некоторые проблемы с использованием сетки начальной загрузки /responsestrap. Каким-то образом, когда я использую сеточную систему вместо горизонтальных столбцов, я получаю вертикальную.

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) в ряд.

Как только вы добавите больше столбца в строку, они начнут отображаться рядом, то есть горизонтально.

Я понятия не имею о реагировании, но я подозреваю, что следующий код, вероятно, добьется цели и создаст 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>
);