React strap 卡无法根据屏幕大小对齐项目

Posted 2023-03-23

【中文标题】React strap 卡无法根据屏幕大小对齐项目

【英文标题】：React strap Cards unable to align items according to the screen size

【发布时间】：2020-09-28 07:30:25

【问题描述】：

我正在使用 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  src=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 的 style 中添加自定义样式，因为你会破坏所有设备的默认布局。

    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  />
                <CardBody>
                    <CardTitle>Title</CardTitle>
                    <CardSubtitle>ChannelTitle</CardSubtitle>
                    <CardText></CardText>
                </CardBody>
            </Card>
    )


export default SongCard

【讨论】：

已编辑，有这样的新东西吗？