基于对象值渲染时创建引导卡网格的问题

Posted 2023-03-06

【中文标题】基于对象值渲染时创建引导卡网格的问题

【英文标题】：Issues creating grid of Bootstrap cards when rendering based on Object values

【发布时间】：2021-12-28 03:43:30

【问题描述】：

我正在创建一个徒步旅行路线应用程序，允许用户将路线添加到公共存储库。

我有一个组件可以渲染一个 Boostrap Card，其中的值通过 props 传递给它。我使用.row 和.col 将它们排列成一个漂亮的网格。

为了从我的对象中的所有项目生成卡片，我从所述对象中读取数据（使用 map() ）然后创建一个 Bootstrap 卡片网格。使用以下代码，它应该是这样的：

Trails.js：

<div id="trails" className="container rounded border shadow">
   <Card className="trailCard" />
</div>

Card.js：

class Card extends Component 
    render() 
        return (
            <div className="card-deck row">
                <div className="col-lg-4 card-col">
                    <div className="card">
                        <img className="card-img-top"  src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
                        <div className="card-body">
                            <h5 className="card-title">Card Title</h5>
                            <p className="card-text"><b>Description: </b>This is a longer card test. This is a longer card test.</p>
                            <p className="card-text"><b>Location: </b> This is a longer card test.</p>
                        </div>
                    </div>
                </div>
                <div className="col-lg-4 card-col">
                    <div className="card">
                        <img className="card-img-top"  src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
                        <div className="card-body">
                            <h5 className="card-title">Card Title</h5>
                            <p className="card-text"><b>Description: </b>This is a longer card test. This is a longer card test.</p>
                            <p className="card-text"><b>Location: </b> This is a longer card test.</p>
                        </div>
                    </div>
                </div>
               [etc..]
     </div>

当我从对象中读取值并使用 map() 来渲染新的 s 时，它看起来是这样的：

Trails.js：

                <div id="trails" className="container rounded border shadow">
                    <div className="card-deck-row">
                        this.props.trailList.map((item) => 
                            return (
                                <div className="col-lg-4 card-col">
                                    <Card
                                        className="trailCard"
                                        trailName=item.trailName
                                        trailType=item.trailType
                                        trailDescription=item.trailDescription
                                        trailLocation=item.trailLocation
                                    />
                                </div>
                            )
                        )
                    </div>
                </div>

Card.js：

class Card extends Component 
    render() 
        return (
                <div className="card">
                    <img className="card-img-top"  src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
                    <div className="card-body">
                        <h5 className="card-title">this.props.trailName</h5>
                        <p className="card-text"><b>Location: </b>this.props.trailLocation</p>
                        <p className="card-text"><b>Category: </b>this.props.trailType</p>
                        <p className="card-text"><b>Description: </b>this.props.trailDescription</p>
                    </div>
                </div>
        )
    


export default Card;

如何使第二个示例像第一个一样对齐到网格？

【问题讨论】：

className="card-deck-row" 的 div 是否具有整个屏幕的宽度？如果不是，它可能会占用 width: auto 这将是卡片本身的宽度。

【参考方案1】：

使用<div className="card-deck row"> 代替<div className="card-deck-row">。希望这能解决您的问题。