在 ReactJS 中使用 Bootstrap 创建块按钮

问题描述

我想创建跨越整个 div 的简单块按钮。我正在使用 react-bootstrap 包在 React 中执行此操作。这是我正在使用的代码：-

<Container>
    <Row className="justify-content-center">
      <Col xs={10} sm={5} md={3}>
        <Form className="form-container">
          <Form.Group controlId="formEmail" className="form-element">
            <Form.Label>Enter Email Address</Form.Label>
            <Form.Control type="email" placeholder="Email Address"></Form.Control>
          </Form.Group>
          <Form.Group controlId="formPwd" className="form-element">
            <Form.Label>Enter Password</Form.Label>
            <Form.Control type="password" placeholder="Password"></Form.Control>
          </Form.Group>
          <Form.Group className="form-element">
            <Button variant="outline-primary" type="submit" block>Login</Button>
          </Form.Group>
        </Form>
      </Col>
    </Row>
  </Container>

然而，生成的按钮不是块类型的。 这是生成的输出：-

按钮的宽度应与上面的文本区域的宽度相同。如何创建此阻止按钮？

解决方法

您必须添加链接

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  crossorigin="anonymous"
/> 

在公共文件夹中的 index.html 中，用于 web 支持 react-bootstrap 样式。

链接来自 react-bootstrap 网站：

https://react-bootstrap.netlify.app/getting-started/introduction/

附上需要添加的链接图片：