Bootstrap網格系統不適用

Question

我的專案中再次出現問題。我有一個元件 ProductCard ，我在 Home 元件中渲染。這就是 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>

這是我在主元件中渲染它的地方

<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>

這是容器元件

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

它出現在列中而不是使用網格系統。請問如何讓Home組件連續顯示。

Answer 1

我認為您正在尋找巢狀網格佈局。看一下這個例子：

  

    

      
        

          

            
Featured Collection
          
        
        

          {products.map(product => )}
        
      
    

  

Answer 2

我移動了由地圖函數傳回的 col-3

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

            
              ......
            
          
        ))}