Reactjs 引导网格答案

【问题标题】：Reactjs boostrap gridReactjs 引导网格
【发布时间】：2018-06-23 17:14:53
【问题描述】：

我正在学习 React，但在使用引导网格/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;

【问题讨论】：

您在Film.js 中只有一个Col，因此它不会创建多个水平列。你到底期待什么？
对不起，迟到的评论。当我发布这个时，我忘记添加我的 App.js。我正在从 API 映射到数组。我已经通过将 col 添加到我的 App.js 的返回来修复它

标签： css twitter-bootstrap reactjs bootstrap-4 reactstrap

【解决方案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>
);

【讨论】：