使用ReactStrap水平对齐卡

问题描述 投票:0回答:1

我正在尝试使用reactstrap创建一副牌。我希望卡片水平对齐但卡片垂直对齐。有人可以告诉我如何实现这一目标?谢谢

这是两个组件

import React, { Component } from "react";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
Col
} from "reactstrap";`

class MovieItem extends Component {
render() {
return (
  <Card>
    <CardTitle>Title</CardTitle>
  </Card>
);
}
}

export default MovieItem;`

MovieList.js

import { Row, Col, CardDeck, CardGroup, Container } from "reactstrap";
import React, { Component } from "react";`
import MovieItem from "./MovieItem";`

class MoviesList extends Component {
render() {
let movies;
if (this.props.movies) {
  movies = this.props.movies.map(movie => {
    return <MovieItem key={movie.id} movie={movie} />;
  });
}
return (
  <Container fluid>
    <CardDeck> {movies}</CardDeck>
  </Container>
);
}
}

export default MoviesList;
reactjs reactstrap
1个回答
0
投票

正如BootstrapReactstrap Card所说,你可以像这样整合它们:

      <Row>
        <Col>
          <Card>
            <Row className="no-gutters">
              <Col md="4">
                <CardImg
                  top
                  width="100%"
                  src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"
                  alt="Card image cap"
                />
              </Col>
              <Col md="8">
                <CardBody>
                  <CardTitle>Card title</CardTitle>
                  <CardSubtitle>Card subtitle</CardSubtitle>
                  <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>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
© www.soinside.com 2019 - 2024. All rights reserved.