如何实现两Col列flex-end对齐且保留移动端按钮居中样式

当前代码无法实现双列右对齐效果，核心原因是Bootstrap默认无尺寸参数的Col组件会作为弹性项自动均分Row的整行宽度，每个列各占50%行宽。即使给Col设置了justify-content-end，列内按钮也只会在自身被分配的50%宽度范围内靠右，两个按钮中间会空出半行间距，无法实现整行维度的右对齐效果。Container上已有的绝对定位、底部固定、通宽样式完全不需要修改，不会影响对齐逻辑调整。

优先推荐方案1，代码更简洁，维护成本更低：

方案1：对齐逻辑上移至Row，列宽自适应内容 #

将原本写在Col上的弹性布局、对齐逻辑全部移到Row组件（Row本身默认就是flex容器），同时给Col添加col-auto属性让列宽自动适配内部按钮内容，不再做整行均分：

<Container style={{ position: 'absolute', bottom: '0px', width: '100%', left: 0, right: 0}}  fluid>
    {/* 按屏宽直接控制整行子项的对齐方式，gap-2给两个按钮预留默认间距，不需要可删除 */}
    <Row className={sizeWidth < 650 ? "justify-content-center gap-2" : "justify-content-end gap-2"}>
        {/* col-auto让列宽跟随内容收缩，不再均分宽度 */}
        <Col className="col-auto">
             <ButtonAnterior tabIndex={-1} onClick={() => setCurrentTab('Produto')} text="anterior" />
        </Col>
        <Col className="col-auto">
           <ButtonProximo onClick={() => setCurrentTab('Pontos')} text="proximo" />
        </Col>
    </Row>
</Container>

实现效果：

• 宽度<650px的移动端场景：两个按钮整体居中，和原有效果完全一致
• 宽度≥650px的桌面端场景：两个按钮自适应宽度后整体靠容器最右侧对齐，符合双列flex-end的要求
• Container原有样式全部保留，无任何修改

方案2：保留Col原有类名逻辑，调整列弹性占比 #

如果因业务限制不能调整Col上已有的类名判断逻辑，可以通过给第一个Col添加弹性扩展属性，让它占满剩余行宽实现右对齐：

<Container style={{ position: 'absolute', bottom: '0px', width: '100%', left: 0, right: 0}}  fluid>
    <Row>
        {/* 桌面端给第一个Col加flex-grow-1，占满除第二个列之外的所有剩余宽度 */}
        <Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end flex-grow-1"}>
             <ButtonAnterior tabIndex={-1} onClick={() => setCurrentTab('Produto')} text="anterior" />
        </Col>
        <Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
           <ButtonProximo onClick={() => setCurrentTab('Pontos')} text="proximo" />
        </Col>
    </Row>
</Container>

该方案不需要改动原有Col的判断逻辑，仅新增一个弹性属性即可实现和方案1完全一致的效果，移动端原有居中逻辑不受任何影响。

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