在 ReactJS 中使用 Bootstrap 创建块按钮答案

【问题标题】：Creating block buttons using Bootstrap in ReactJS在 ReactJS 中使用 Bootstrap 创建块按钮
【发布时间】：2021-08-08 18:01:15
【问题描述】：

我想创建跨越整个 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>

但是，创建的结果按钮不是块类型。这是生成的输出：-

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

【问题讨论】：

标签： css bootstrap-4 flexbox react-bootstrap react-bootstrap-form

【解决方案1】：

你必须添加链接

<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 中，以便网络支持 react-bootstrap 样式。

链接取自 react-bootstrap 网站：

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

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

【讨论】：