时间戳

首页 > 解决方案 > 我无法使用 React 引导水平显示卡片

javascript - 我无法使用 React 引导水平显示卡片

问题描述

我正在尝试使用 React Bootstrapping 构建一个投资组合网站。我使用卡片组件来显示图像，但它们只会垂直显示。我试图让它们水平显示。我尝试使用 Card.js 文件中的一些 CSS 进行故障排除。没有任何变化。下面是我的代码。

索引.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


.g-card {
  margin: 20px;
}


.g-card-image {
  border-radius: 10px;
  width: 300px;
  height: 480px;
  box-shadow: 0px 0px 3px 1px #ccc;
}


.g-card-info {
  margin-top: 10px;
  min-height: 100px;
}


.g-card-title {
  font-size: 24px;
  margin: 0px;
}


.g-card-sub-title {
  font-size: 16px;
  margin: 0px;
}

Card.js

import React from 'react';

import CardInfo from './Cardinfo';

function Card(props) {

    return (
        <div className="d-inline-block g-card" >
            <img className="g-card-image" src={props.item.imgSrc} alt={props.item.imgSrc} />
            { props.item.selected && <CardInfo title={props.item.title} subTitle={props.item.subTitle} link={props.item.link} /> }
        </div>
    )

}

export default Card;

轮播.js

import React from 'react';

import Card from './Card';

import EricDP from '../assets/images/EricDP.jpg';
import Github from '../assets/images/Github.png';
import Trailhead from '../assets/images/Trailhead.png';

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

class Carousel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    title: 'LinkedIn',
                    subTitle: 'Check out my LinkedIn!',
                    imgSrc: EricDP,
                    link: '',
                    selected: false
                },
                {
                    id: 1,
                    title: 'Github',
                    subTitle: 'See my projects on Github, including this site!',
                    imgSrc: Github,
                    link: '',
                    selected: false
                },
                {
                    id: 2,
                    title: 'Trailhead',
                    subTitle: 'See my Trailhead profile and salesforce skills.',
                    imgSrc: Trailhead,
                    link: '',
                    selected: false
                }
            ]
        }
    }

    handleCardClick = (id, card) => {
        let items = [...this.state.items];

        items[id].selected = items[id].selected ? false : true;

        items.forEach(item => {
            if (item.id !== id) {
                item.selected = false;
            }
        });

        this.setState({
            items
        });
    }

    makeItems = (items) => {
        return items.map(item => {
            return <Card item={item} onClick={(e => this.handleCardClick(item.id, e))} key={item.id} />
        })
    }

    render() {
        return (
            <Container fluid={true}>
                <Row className="justify-content-around">
                    {this.makeItems(this.state.items)}
                </Row>
            </Container>
        )
    }

}

export default Carousel;

标签： javascriptcssreactjsbootstrap-4

解决方案

我已添加display: inline-flex到 Carousel.js 中的 Row 标记

文件。

display:inline-flex将 flex 布局应用于 flex 项或子项以及容器本身。因此，容器就像子元素一样充当内联 flex 元素，因此仅占用其项目/子元素所需的宽度，而不是屏幕的整个宽度。

Carousel.js 代码：

<Container fluid={true}>
  <Row 
    style={{display: "inline-flex"}} 
    className="justify-content-around">            
      {this.makeItems(this.state.items)}
  </Row>
</Container>

推荐阅读