反应带卡无法根据屏幕尺寸对齐项目

Question

我正在使用React卡来显示动态卡。我想在一行视图中显示4张用于桌面视图的卡片，而在移动视图中显示1张卡片，但是它总是垂直出现，而水平显示没有卡片

卡的容器组件

    import React from 'react'
    import SongCard from '../SongCard'
    import {
        CardDeck
    } from 'reactstrap';

    function Popular({ popular }) {
        return (
            <div>
                {popular.map((post) =>
                    <div key={post.etag}>
                        {
                            <CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
                                <SongCard
                                    Title={post.snippet.title}
                                    VideoId={post.id.videoId}
                                    Image={post.snippet.thumbnails.high.url}
                                    ChannelTitle={post.snippet.channelTitle} />
                            </CardDeck>
                        }
                    </div>)
                }
            </div>
        )
    }

    export default Popular

卡的组成部分是>>

    import React from 'react'
    import {
        Card, CardImg, CardText, CardBody,
        CardTitle, CardSubtitle
    } from 'reactstrap';

    function SongCard({ Title, VideoId, Image, ChannelTitle }) {
        return (
            <div>
                <Card style={{maxWidth:'30em',flex: '1'}}>
                    <CardImg top width="100%" src={Image} alt="image" />
                    <CardBody>
                        <CardTitle>{Title}</CardTitle>
                        <CardSubtitle>{ChannelTitle}</CardSubtitle>
                        <CardText></CardText>
                    </CardBody>
                </Card>
            </div>
        )
    }

    export default SongCard
    

我正在使用React卡来显示动态卡。我想在桌面视图中一排显示4张卡片，在移动视图中显示1张卡片，但是它总是垂直出现的，所以没有水平显示卡片...

Answer 1

首先，在SongCard中，您可能不需要将card组件封装在div中，因为默认情况下div是全角，所以它使Card的样式不可用。