如何水平显示我的产品卡片？

Question

ProductsCard

import React from 'react'
import { Card, Container, Row, Col, ListGroup, Button} from 'react-bootstrap'

function ProductCard(props){
    return(
        <div>
            <Container>
                <Row>
                    <Col md={3} xs={6}>
                        <Card border="primary" style={{widht:'14rem'}}>
                            <Card.Img variant="top" src={props.product.image}/>
                            <Card.Body>
                                <Card.Title>{props.product.name}</Card.Title>
                                <Card.Text>Price: ${props.product.price}, Quantity: {props.product.quantity}
                                </Card.Text>
                                <Button variant="primary">Add to Cart</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                </Row>
            </Container>
            
        </div>
    )
}

export default ProductCard

主页

import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import {Container, Row, Col, Image, Card, Button, CardDeck} from 'react-bootstrap';
import axios from 'axios';
import ProductCard from './ProductCard';

    enter code here


function Home(){
    const url = 'http://localhost:8888/ProgWeb/public/api/products'
    const [product, setProduct]=useState({
        loading: false,
        data: null,
        error: false
    })

    useEffect(() => {
        setProduct({
            loading:true,
            data: null,
            error: false
        })
        axios.get(url)
        .then(response => {
            setProduct({
                loading: false,
                data: response.data,
                error: false
            })
        })
        .catch(() =>{
            setProduct({
                loading: false,
                data: null,
                error: true
            })
        })



    }, [url])

    let content = null

    if(product.data){
        content = 
        product.data.map((product, key) => 
            <div  key={product.id}>
                <ProductCard
                product={product} 
                />
            </div>
        )
    }
  
    return (
        <div>
        {content}
        </div>
    );
}

export default Home;

这是我第一次使用 react-bootstrap。所以我在这里没有太多线索。

我想要的是生成连续三张卡片的卡片。

现在这是我到目前为止所做的代码，但我对如何让卡片水平放置感到困惑，我已经输入 bootstrap 但我仍然得到垂直的产品

Answer 1

在您的 ProductsCard 组件中，给您的 div 容器一个 ID，它可以是任何东西。示例：

function ProductCard(props){
   return(
       <div id=“unique-name”>
           <Container>
               <Row>
                    ...
               </Row>
           </Container>
           
       </div>
   )
}

现在转到您的 css 文件并添加以下内容：

#unique-name {
    display: flex;
    flex-direction: row;
    justify-content: space-around

}

我们正在将 Container 变成一个 flexbox 并将方向更改为水平。参考：https://css-tricks.com/almanac/properties/f/flex-direction/

或者：

您可以像这样简单地将 class=“row” 添加到 div 元素：


if(product.data){
        content = 
        product.data.map((product, key) => 
            <div class=“row” key={product.id}>
   
                <ProductCard
                product={product} 
                />
   
            </div>
        )
    }

如果有帮助请告诉我！

如何水平显示我的产品卡片？

How can i show my products cards in horizontally?

css

reactjs

react-bootstrap