React背带卡无法根据屏幕尺寸对齐项目 [英] React strap Cards unable to align items according to the screen size

问题描述

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

I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally

卡的容器组件

The Container Component Of The card

    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

卡组件为

And the card component is

    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

推荐答案

首先，在SongCard中，您可能不需要将card组件封装在div中，这会使Card类型的样式不可用，因为div在默认情况下是完整的宽度.

First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.

第二，CardDeck应该在地图循环之外，因为您在每个帖子中都创建了一个新的CardDeck，而这可能不是您想要的.而是直接在SongCard中放置"key = {post.etag}".

Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.

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

I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.

    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

这篇关于React背带卡无法根据屏幕尺寸对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！