Reactstrap 卡片无法根据屏幕尺寸对齐项目

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

Answer 1

首先，在 SongCard 中，您可能不需要将卡片组件封装在 div 中，这会使您的卡片样式不可用，因为 div 默认为全宽。

其次，CardDeck 应该在地图循环之外，因为您每个 post 创建一个新的 CardDeck，它可能不是您想要的。将您 "key={post.etag}" 直接放入 SongCard。

我也不建议在 CardDeck 的样式中添加自定义样式，因为你会破坏所有设备的默认布局。

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

function Popular({ popular }) {
    return (
        <CardDeck>
            {popular.map((post) =>
                            <SongCard
                                key={post.etag}
                                Title={post.snippet.title}
                                VideoId={post.id.videoId}
                                Image={post.snippet.thumbnails.high.url}
                                ChannelTitle={post.snippet.channelTitle} />
                </div>)
            }
       </CardDeck>
    )
}

export default Popular

和

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

function SongCard({ Title, VideoId, Image, ChannelTitle }) {
    return (
            <Card>
                <CardImg top src={Image} alt="image" />
                <CardBody>
                    <CardTitle>{Title}</CardTitle>
                    <CardSubtitle>{ChannelTitle}</CardSubtitle>
                    <CardText></CardText>
                </CardBody>
            </Card>
    )
}

export default SongCard

Reactstrap 卡片无法根据屏幕尺寸对齐项目

React strap Cards unable to align items according to the screen size

css

twitter-bootstrap

reactjs

react-bootstrap

reactstrap