ReactJS->为什么我的产品以这种方式显示？

如何解决ReactJS->为什么我的产品以这种方式显示？

所以我有一个React应用，其中有我要映射的产品列表，然后向用户展示它们，并且一切正常，直到我进入第二行（连续4个产品）），它仅显示3个产品和一个空白区域（由于某种原因，该页面的html显示了自己的位置），而第4个产品位于新行中。为什么会这样呢？我的猜测是我的CSS或map函数中包含某些东西，这是我的map函数：

{productsList.map((product,id)=>
                <div className='productsList' key={id}>
                    <div className='productShow'>
                        <h3 className='productName'>{product.name}</h3>
                        <img className='productimage' src={product.image}></img>
                        <p className='productPrice'><strong>$ {product.price}.99</strong></p>
                        <Button  className='addProductButton' variant='success' onClick={()=>addProduct(product,id)}>
                            <MdAddShoppingCart size={20}></MdAddShoppingCart>
                            <strong>Add to cart </strong>
                        </Button>
                    </div>
                </div>)}

这是我的CSS：

body,html
{
    background-color:#89ABE3FF;
}
.productimage
{
    max-width: 100%;
    border-radius: 10%;
}
.productShow
{
    background-color: rgb(255,255,0.5);
    Box-shadow: 0px 5px 20px 5px gray;
    width: 20%;
    height: 25%;
    margin-right: 4.5%;
    margin-top:1.5%;
    padding: 1%;
    border-radius: 10px;
    float: right;
    transition: 0.4s linear;
}
.productShow:hover
{
    background-color: rgb(255,0.9);
    transition: 0.4s linear;
}
.cartIndicator
{
    color: rgb(59,55,55);   
    transition: linear 0.6s;
}
.cartIndicator:hover
{
    color:black;  
    transition: linear 0.6s;
}
.navbar
{
    Box-shadow: 0px 2px 0px black;
    background-color:#FCF6F5FF;
}
.addProductButton
{
    margin-top: 2%;
}
.carouselWrapper
{
}

.carouselImage
{
    width: 100%;
    height: 400px;
}

解决方法

问题可能是您在类productShow中使用了20％的宽度（同一行上可能有（{20*5 = 100）5种产品。

但是您增加了4.5％的保证金权利。因此，您有24.5％的边距和宽度，这将是24,5 * 4 = 96 < 100，因此您可以按行添加4个元素。

最后，您添加了填充，所以您有2％的填充（左1％-右1％），那么每个产品将是26,5。因此，26,5*4 = 106 > 100最大宽度为parent。然后您可以在行26,5*3 = 79,5中使用3个元素。（100-79,5 = 20,5个空白）。

修复

将此属性添加到productShow：

box-sizing: border-box

Link box-sizing的工作原理。

您将包括宽度的填充，每个元素的宽度为24.5％。按行4个元素

我解决了我的问题，解决方案非常简单。这不是CSS，也不是图像，也不是我映射产品的方式。就是我必须对所有拥有div的div应用引导程序。那就是我所改变的：

 <div className='productShow col-sm-2 col-lg-2 col-xs-2'>

我已经在类名中添加了col-sm-2 col-lg-2 col-xs-2，它现在就像一个超级字符一样！