如何在引导程序中给按钮一个按钮右对齐？答案

【问题标题】：how to give button a button right alignment in bootstrap?如何在引导程序中给按钮一个按钮右对齐？
【发布时间】：2021-01-19 08:39:21
【问题描述】：

我正在尝试对齐一行右上角的两个按钮，但无论我使用哪种方法，每次都会显示相同的结果，这是供您参考的代码：

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;

我得到的结果是：

任何帮助将不胜感激！！！！！！

【问题讨论】：

标签： css reactjs jsx

【解决方案1】：

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

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

由于此 div 位于应用了属性 display:flex; 的 div.row 中，它应该自动将其推到右侧

【讨论】：

很高兴为您提供简单的解决方案

【解决方案2】：

添加

className="float-right"

到包裹按钮的 div

【讨论】：

【解决方案3】：

您可以将 Row 的每个子元素块添加到 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>

【讨论】：