Question

我有一个主要元素，该元素分为3列的网格。在中间一列，我正在显示一些列表。每个清单都是一个div元素，并且其中包含一个反应引导卡。

我正试图让这张卡覆盖父母的100％，但这似乎对我不起作用。

反应成分

        <div className="backfill"> 
            <Row key={Listing_Id}>
                <Card style={{ cursor: 'pointer' }}  border="light" className="text-center fullCard" >
                    <Card.Body>
                        <Card.Title className="Title">
                            {Listing_Name}
                            <hr />
                            <Button className="Button" variant="outline-success" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_Likes', Listing_Location)}> <Twemoji options={options} text=":+1:" /></Button>
                            <Badge className="Badge" variant="light">{Listing_Likes}</Badge>
                            <Button className="Button" variant="outline-danger" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_DisLikes', Listing_Location)}><Twemoji options={options} text=":-1:" /></Button>
                            <Badge className="Badge" variant="light">{Listing_DisLikes}</Badge>
                            <hr />
                            <Button className="Button" variant="outline-info" ><Twemoji text=":pushpin:" /></Button>
                            <Badge className="Badge" variant="light">{Listing_Location}</Badge>
                        </Card.Title>
                        <Card.Text className="Listing" onClick={() => handleClick(Listing_Id)} >
                            <hr />
                            {ListingBody}
                            <ModalLayout
                                Listing_Location={Listing_Location}
                                Listing_Likes={Listing_Likes}
                                Listing_DisLikes={Listing_DisLikes}
                                Listing_Name={Listing_Name}
                                Listing_Id={Listing_Id}
                                handleLikeDisLike={props.handleLikeDisLike}
                                handleClose={closeModal}
                                show={showModal} />

                        </Card.Text>
                    </Card.Body>
                </Card>
            </Row>
            <br />
        </div >

用于div和Card元素的CSS

.backfill {
    background-color: aqua;
}

.fullCard {
    width:'100%';
}

我目前最终的界面看起来像这样。请您帮我解决一下。我想让这张卡成为其父div的100％。

Answer 1

只需删除CSS中的单引号

WHERE id=1 OR id=2 OR id=3

必须成为

.fullCard {
    width:'100%';
}

将子元素设置为父元素的100％宽度

1 个答案: