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) => (
         

            
              ......
            
          
        ))}