如何在网页端与移动端实现容器内卡片居中？

我尝试将BudgetCard组件在Container容器内居中，但始终无法实现，网页端和移动端都存在布局问题。我目前正在提升前端设计能力，经验有限，恳请帮忙解决。

相关代码 #

<Container>
  <Header money={money} setMoney={setMoney}/>
  <Row className="justify-content-center">
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
    <Col>
      <BudgetCard />
    </Col>
  </Row>
</Container>

布局效果截图 #

解决方案 #

从代码和截图来看，核心问题是Col组件未指定响应式宽度，导致Bootstrap栅格系统无法合理分配空间，加上卡片自身可能存在固定宽度，最终引发溢出或居中失效。可以按以下步骤调整：

1. 给Col组件设置响应式栅格宽度
   遵循Bootstrap 12列栅格规则，根据卡片数量设置适配不同屏幕的宽度，同时添加间距避免卡片拥挤：

   <Container>
     <Header money={money} setMoney={setMoney}/>
     <Row className="justify-content-center g-3"> {/* g-3控制卡片间距 */}
       <Col md={2} sm={6} xs={12}> {/* 桌面端每行6个，平板每行2个，手机每行1个 */}
         <BudgetCard />
       </Col>
       {/* 重复其余Col组件 */}
     </Row>
   </Container>
   

2. 约束BudgetCard的宽度适配父容器
   检查BudgetCard的内部样式，确保卡片不会超出Col的范围：

   .BudgetCard {
     width: 100%;
     max-width: 280px; /* 可选：限制卡片最大宽度，避免过宽 */
     margin: 0 auto; /* 确保卡片自身在Col内水平居中 */
   }
   

3. 排查全局样式冲突
   确认没有自定义样式覆盖Container、Row的默认内边距/外边距，比如避免给Container设置padding-left: 0这类会破坏居中的样式。

内容的提问来源于stack exchange，提问作者mustafasamet