1

请帮助任何人，

3d 设计图标大小为 219px

当我使用第一个 Div 组件大小 219px 时工作正常，并且所有 Cols 都以全屏方式连接在一起，并且中心也与移动屏幕对齐，如果我尝试使用 Card 的内容将其用作相同的 Div 样式，则无法正确对齐.....卡片组件是否有任何问题，或者我在某处遗漏了什么

这是用于移动屏幕缩放

这个全屏

 <div style={{ paddingTop: 50, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" }}>
                <Row>
                    <Col style={{ width: 219 }}>  <Example /></Col>
                    <Col style={{ width: 219 }}><Example1 /> </Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                </Row>
            </div>

            <div style={{ paddingTop: 10, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" , textAlign:"left"}}>
                <Row>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={threedcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#e0741b", color: "white" }}> 3D DESIGN</Card.Header>

                            <Card.Body style={{ backgroundColor: "#fff567" }}>


                                <Card.Text>
                                    We at Hephy, have the finest Designer to make 3d models out of your desired material.
                             </Card.Text>
                                <Threed />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={eventcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#d15950", color: "white" }}> EVENT </Card.Header>

                            <Card.Body style={{ backgroundColor: "#feece6" }}>

                                <Card.Text>
                                    Right from employee birthday parties to culture events, we like to add that something extra to the Event to make it grand.
                             </Card.Text>
                                <Eventmodal />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col  style={{ width: 219 }}>
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={decocard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#dc6372", color: "white" }}>DECORATION</Card.Header>

                            <Card.Body style={{ backgroundColor: "#fff0f5" }}>

                                <Card.Text>
                                    At hephy, we understand the emotions of parents and their joy when their Children get married.
                             </Card.Text>
                                <Decoration />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={promoaddcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#31986b", color: "white" }}>PROMO & ADDS</Card.Header>

                            <Card.Body style={{ backgroundColor: "#b7fbf3" }}>


                                <Card.Text>
                                    Rather focusing on specific product or services, we focus on your brand as a whole. It enables to increase your growth in many ways.
                             </Card.Text>
                                <Promomodal />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col  style={{ width: 219 }}>
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={festcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#3d7867", color: "white" }}>FEST</Card.Header>

                            <Card.Body style={{ backgroundColor: "#cff6f2" }}>


                                <Card.Text>
                                    We provide School and College Events. While organizing events, we provide proper arrangements for everything.
                             </Card.Text>
                                <Festmodal />
                            </Card.Body>

                        </Card>
                    </Col>
                </Row>
            </div>
4

1 回答 1

0

justify-space-around在父 div 中执行

于 2020-04-06T13:04:57.413 回答