reactjs - 如何使我的 React Bootstrap 卡水平排列且等距排列(如果可能，也可以响应)

Question

我正在使用 Reactstrap 并动态显示我的卡片，无论我尝试什么，它们似乎都想垂直堆叠。这是渲染它们的组件:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { CardDeck } from 'reactstrap';
import { fetchMerch } from '../actions/fetchMerchAction';
import { fetchUniqueMerch } from '../actions/fetchUniqueMerchAction';
import ItemCard from './ItemCard';
import shortid from 'shortid';

class ShopHome extends Component {

  componentDidMount() {
    this.props.onInitMerch();
  }

  showItemDetailHandler = (id) => {
    // console.log("*",id);
    this.props.onInitUniqueMerch(id);
    this.props.history.push(`detail/${this.props.id}`)
  }

  render() {

    let cards;
    if ( this.props.cards ) {
      cards = Object.values(this.props.cards).map( card => (
        <Link to={'/detail/' + card.id } key={`div-${shortid.generate()}`}>

              <ItemCard 
                key={card.id} 
                id={card.id} 
                title={card.title}
                price={card.price}
                image={card.img} 
                description={card.description}
                clicked={() => this.showItemDetailHandler(card.id)}
              />
        </Link>
        ) 
      )
    };
    return ( 
        <CardDeck>
          {cards}
        </CardDeck>     
    );
  }
}

const mapStateToProps = state => {
  // console.log("map props to state")
  // console.log("----->",state.data.cardData)
  return {
    cards: state.data.cardData,
    id: state.data.cardData
  };
}

const mapDispatchToProps = dispatch => {
  return {
    onInitMerch: () => dispatch(fetchMerch()),
    onInitUniqueMerch: (id) => dispatch(fetchUniqueMerch(id))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ShopHome);

这是卡片组件:

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle } from 'reactstrap';
import './ItemCard.css';

class ItemCard extends Component {

  render() {

    return (
    <div>
      <Card className="card-style" onClick={this.props.clicked}>
        <CardImg top width="100%" src={this.props.image} alt="Card image cap" />
        <CardBody>
          <CardTitle >{this.props.title}</CardTitle>
          <CardSubtitle>${this.props.price}</CardSubtitle>
          <CardText>{this.props.description}</CardText>
        </CardBody>
      </Card>
    </div>
    );
  }
}

export default withRouter(ItemCard);

这是 ItemCard.css:

.card-style {
  max-width: 30%;
}

如果我使用内联样式为卡片提供固定大小: style={{width: 20 + 'rem'}} 卡片水平排列，但我无法将它们置于页面中心。他们排在左边一点。我只想要一个三卡行居中且均匀分布。

Answer 1

您可以使用 style={{display: 'flex', flexDirection: 'row'}}放在 CardDeck 上，然后放入 style={{flex: 1}}卡上。

他们应该填满剩余的空间。一件事是确保提供您希望 CardDeck 的大小。

更多关于 flexbox 的信息 here