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