如何使用bootstrap在Reactjs中单行显示card 4个卡

Question

const ViewCategory = () => {
const history = useHistory();
useEffect(() => {
    axios.get('http://localhost:8080/products', {
            headers: {
                Authorization: "Bearer " + localStorage.getItem("token")
            }
        })
        .then((response) => {
            console.log("List of customers", response.data);
            setData(response.data);
            setisLoaded(true);
        })
        .catch((error) => {
            console.log(error);
        });
}, []);

const [data, setData] = useState();
const [isloaded, setisLoaded] = useState(false);



let product = null;
if (isloaded) {
    product = data.map(product1 => ( <
        div className = "container" >
        <
        div className = "row" >
        <
        div className = "card" >
        <
        div class = "col-sm" >


        <
        div className = "card-body" >

        <
        h4 className = "card-title" > {
            product1.name
        } < /h4>

        <
        p className = "card-text" > {
            product1.brand
        }. < /p> <
        button className = "btn btn-primary" > View < /button> <
        /div> <
        /div>

        <
        /div> <
        /div> <
        /div>
    ))
}

return ( <
    div > {
        product
    } < /div>
);

}

导出默认ViewCategory；

我正在尝试显示4卡在一个单行，我正在显示使用地图方法。 在意大利，我在一行中得到一张卡片。我怎样才能在单行中显示多张卡片。谁能建议我最好的方法是什么

Answer 1

要使卡片显示在单行中，必须如下所示进行渲染:

let products = null;

if (isloaded) {
    products = data.map((product) => (
        <div className="card">
            <div class="col-sm">
                <div className="card-body">
                    <h4 className="card-title"> {product.name} </h4>
                    <p className="card-text"> {product.brand}. </p>
                    <button className="btn btn-primary"> View </button>
                </div>
            </div>
        </div>
    ));
}

return (
    <div className="container">
        <div className="row">{products}</div>
    </div>
);