Css 如何在引导中使按钮正确对齐？

我试图对齐一行右角的两个按钮，但无论我使用什么方法，每次都会显示相同的结果，下面是供您参考的代码：

从“React”导入React；
从“引导”导入引导；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
const AdminPanel=（）=>{
const users=[{name:“Talha”}，{name:“Ali”}]；
返回(
{users.map（（用户）=>(
{user.name}
))}
列表
);
};
导出默认管理面板将类：
ml auto
添加到：

<div className="btn-group ml-auto">



由于此div位于具有属性
display:flex的
div.row
中已应用，它应自动将其向右推
添加

className="float-right" 

到包装按钮的div
中，您可以将行的每个子元素块添加到
Col
组件中，并将
justify content between
类添加到
行
组件中，如下所示

<Col className="shadow-lg bg-white rounded mx-5">
    {users.map((user) => (
        <Row
            className="justify-content-between shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
            style={{ height: "7vh" }}
        >
            <Col>
                {user.name}
            </Col>
            <Col>
                <div className="btn-group">
                    <a href="#">
                        <button className="btn btn-primary">Edit</button>
                    </a>
                    <a href="#">
                        <button className="btn btn-danger">Delete</button>
                    </a>
                </div>
            </Col>
        </Row>
    ))}
</Col>


{users.map（（用户）=>(
{user.name}
))}
很高兴为您提供一个简单的解决方案