如何实现下述代码中多个Button组件的尺寸保持一致？

你当前使用的是React Bootstrap组件库，可通过以下几种方式快速实现按钮尺寸统一：

• 方案1：使用Bootstrap原生工具类（最快实现）
  直接给所有<Button>组件添加w-100类名，按钮会自动铺满所在ListGroup.Item的宽度，天然统一尺寸。修改后的代码示例：

<div>
  {userInfo && userInfo.isAdmin && (
    <Container>
      <ListGroup variant="">
        <ListGroup.Item>
          <a href="http://localhost:8000/admin/">
            <Button variant="outline-success" className="w-100">Admin Portal</Button>
          </a>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/orderlist">
            <Button variant="outline-success" className="w-100">Orders List</Button>
          </LinkContainer>
        </ListGroup.Item>
        <ListGroup.Item>
          {" "}
          <LinkContainer to="/admin/productlist">
            <Button type="submit" variant="outline-success" className="w-100">
              Products List
            </Button>
          </LinkContainer>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/appointments">
            <Button variant="outline-success" className="w-100">Appointments List</Button>
          </LinkContainer>
        </ListGroup.Item>
      </ListGroup>
    </Container>
  )}{" "}
</div>

• 方案2：自定义固定宽度（适合需要统一指定按钮尺寸的场景）
  给外层Container添加自定义类名，比如admin-side-menu，然后在全局CSS中添加如下规则：

.admin-side-menu .btn {
  width: 220px; /* 可根据设计需求调整数值 */
  text-align: center;
}

该方案无需修改每个Button组件，仅需加一个类名即可全局生效。

• 方案3：最小宽度适配（兼顾长短文本自适应）
  如果不想让按钮太宽，也可以设置最小宽度限制，避免短文本按钮过窄：

/* 全局CSS */
.admin-side-menu .btn {
  min-width: 180px;
  text-align: center;
}

当前问题对应的原效果如下：

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