如何在引导中给按钮一个正确的对齐方式？

Question

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

​

import React from "react";
import bootstrap from "bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const AdminPanel = () => {
  const users = [{ name: "Talha" }, { name: "Ali" }];
  return (
    <Container className="pt-5">
      <Row className="d-flex" style={{ height: "70vh" }}>
        <Col className="shadow-lg bg-white rounded mx-5">
          {users.map((user) => (
            <Row
              className="shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
              style={{ height: "7vh" }}
            >
              {user.name}
              <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>
            </Row>
          ))}
        </Col>
        <Col className="shadow-lg bg-white rounded mx-5">
          <h1>
            list
          </h1>
        </Col>
      </Row>
    </Container>
  );
};

export default AdminPanel;

​

我得到的结果是：

​

如有任何帮助，将不胜感激！

Answer 1

将类：ml-auto (= margin-left:auto !important)添加到：

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

由于这个div位于一个应用了属性div.row的display:flex;中，它应该自动地将它推到正确的位置。

Answer 2

添加

className="float-right" 

将按钮包装到div上

Answer 3

可以在Col组件中添加行的每个子元素块，并将justify-content-between类添加到Row组件中，如下所示

<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>