如何让我的 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

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

他们应该填满剩余的space。一件事是确保提供您希望 CardDeck 达到的尺寸。

关于 flexbox 的更多信息 here

如何让我的 React Bootstrap 卡片水平排列并等距排列（如果可能，也响应式）

How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)

twitter-bootstrap

reactjs

react-bootstrap

reactstrap