Question

我正在尝试使用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;

Answer 1

正如Bootstrap和Reactstrap 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>

Answer 2

我遇到了同样的问题。基本解决方案是将您的卡片组放在行组件中。这是我的代码的一部分。

<Container  fluid>

  <Row>
    <ClassroomCard/>
    <ClassroomCard/>
    <ClassroomCard/>
  </Row>

  <Row>
    <ClassroomCard/>
    <ClassroomCard/>
    <ClassroomCard/>
  </Row>

</Container>

稍后，由您自行决定相应地更改元素的样式。希望这对将来会遇到此问题的人有所帮助。

使用ReactStrap将卡水平对齐

2 个答案: