Как сделать так, чтобы мои карты React Bootstrap выстраивались в горизонтальное положение и располагались на одинаковом расстоянии (также, если возможно, отзывчиво) - PullRequest
Новая
       22

Как сделать так, чтобы мои карты React Bootstrap выстраивались в горизонтальное положение и располагались на одинаковом расстоянии (также, если возможно, отзывчиво)

0 голосов
/ 28 декабря 2018

Я использую 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'}}, карты располагаются горизонтально, но я не могу центрировать их на странице.Они выстроились немного влево.Я просто хочу, чтобы ряд из трех карт располагался по центру и располагался равномерно.

1 Ответ

0 голосов
/ 28 декабря 2018

Вы можете использовать style={{display: 'flex', flexDirection: 'row'}} на CardDeck, а затем положить style={{flex: 1}} на карту.

Они должны заполнить оставшееся пространство.Прежде всего, убедитесь, что вы указали нужный размер CardDeck.

Подробнее о flexbox здесь

...