为什么偏移网格道具有时在react-bootstrap中不起作用？

Question

我在反应botostrap时经常遇到问题，有时网格偏移道具不起作用，只有常规的bootstrap类对我有用。

代码：

<Carousel.Item >
    <div className="item-container d-flex flex-column flex-wrap ">
       {
          this.categories.map(category => {
             return (
               <Card  className="px-2 category__card col-xl-4 col-sm-6">
                  <div className=" car-container" style={category.style}>
                      <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                             <h3>
                                {category.title}
                             </h3>
                           </Card.Title>
                          <Button variant="light rounded-0" >View Products</Button>    
                       </Card.Body>
                       <Card.Img variant="bottom" src={category.img} className="card-image"/>


                   </div>  

                 </Card>
               );
            })
          }
     </div>
 </Carousel.Item>

此代码的工作方式与我在 Card 组件col-xl-4 col-sm-6中使用常规引导程序类的方式相同，但在我删除这些类并使用react-bootstrap道具sm={6} xl={4}时不起作用 >

我可以使用引导程序类并感到高兴，但我需要使轮播项目中的卡片宽度动态变化，所以为什么我要问这个问题，这些道具背后的原因可能不起作用？？