react带卡无法根据屏幕大小对齐项目

IT技术 css reactjs twitter-bootstrap react-bootstrap reactstrap
2021-05-12 11:50:32

我正在使用 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
1个回答

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

其次，CardDeck 应该在地图循环之外，因为您每个帖子都创建一个新的 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
其它你可能感兴趣的问题
上一篇如何在 ReactJs 中制作步骤向导表单？ 下一篇暂停react本机博览会音频？