时间戳

首页 > 解决方案 > 如何在引导程序中给按钮一个按钮右对齐？

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

问题描述

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

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;

我得到的结果是这样的：在此处输入图像描述

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

标签： cssreactjsjsx

解决方案

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

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

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

推荐阅读