Le système de grille Bootstrap ne s'applique pas

Question

Un problème survient à nouveau dans mon projet. J'ai un composant ProductCard ，我在 Home rendu dans un composant. Il s'agit du composant ProductCard

<div className={location.pathname === "/store" ? `gr-${grid}` : "col-3"}>
      {data &&
        data.length > 0 &&
        data.map((item, index) => (
          <Link
            key={index}
            to="/store/product-view/:id"
            className="product-card position-relative"
          >
            <div className="wishlist-icon position-absolute">
              <button
                className="border-0 bg-transparent"
                onClick={() =>
                  dispatch(
                    addWishlist({
                      token: user.refreshToken,
                      data: { item: item._id },
                    })
                  )
                }
              >
                <img src="/assets/images/wish.svg" alt="..." />
              </button>
            </div>
            <div className="product-image">
              {item.images.slice(0, 2).map((image, index) => (
                <img
                  key={index}
                  className="img-fluid"
                  src={image.image}
                  alt="..."
                />
              ))}
            </div>
            <div className="product-details">
              <h6 className="brand">{item.brand.name}</h6>
              <h5 className="product-title">{item.title}</h5>
              <Rating style={{ maxWidth: 90 }} value={item.totalRatings} />
              <p
                className={`description ${grid === 12 ? "d-block" : "d-none"}`}
              >
                {item.category.description}
              </p>
              <p className="price">&#36;&nbsp;{item.price}</p>
            </div>
            <div className="action-bar position-absolute">
              <div className="d-flex flex-column gap-15">
                <button className="border-0 bg-transparent">
                  <img src="assets/images/view.svg" alt="..." />
                </button>
                <button className="border-0 bg-transparent">
                  <img src="assets/images/prodcompare.svg" alt="..." />
                </button>
                <button className="border-0 bg-transparent">
                  <img src="assets/images/add-cart.svg" alt="..." />
                </button>
              </div>
            </div>
          </Link>
        ))}
    </div>

C'est ici que je le restitue dans le composant principal

<Container classProp="featured-wrapper py-5 home-wrapper-2">
   <div className="row">
      <div className="col-12">
         <h4 className="section-heading">Featured Collection</h4>
      </div>
          <ProductCard data={featuredProducts} />
  </div>
</Container>

Voici le composant conteneur

const Container = (props) => {
  return (
    <section className={props.classProp}>
      <div className="container-xxl">{props.children}</div>
    </section>
  );
};

Il apparaît en colonnes au lieu d'utiliser un système de grille. Veuillez me dire comment afficher le composant Accueil en continu.

Answer 1

Je pense que vous recherchez une disposition en grille imbriquée. Jetez un œil à cet exemple :

  

    

      
        

          

            
Featured Collection
          
        
        

          {products.map(product => )}
        
      
    

  

Answer 2

J'ai déplacé la col-3 renvoyée par la fonction map

   {data &&
     data.length > 0 &&
       data.map((item, index) => (
         

            
              ......
            
          
        ))}