React Bootstrap - 将按钮与带标签的文本输入框放在同一行

Question

以下是我的React Bootstrap代码，导致提交按钮与具有标签的文本字段不在同一行，是否有办法让提交按钮与文本字段在同一行？

以下是截图：

    return (
        <Form>
            <Form.Row>
                <Form.Group as={Col} controlId="formGridEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                </Form.Group>

                <Form.Group as={Col} controlId="formGridPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>

                <Form.Group as={Col} controlId="formButton">
                    <Button>Submit</Button>
                </Form.Group>
            </Form.Row>
        </Form>
     );
   }

- Dudey007

Answer 1

使用Bootstrap的d-flex类。您只需要同时添加align-items-end即可：

      <Form>
        <Form.Row className="d-flex align-items-end">
          <Form.Group as={Col} controlId="formGridEmail">
            <Form.Label>Email</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>

          <Form.Group as={Col} controlId="formGridPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>

          <Form.Group as={Col} controlId="formButton">
            <Button>Submit</Button>
          </Form.Group>
        </Form.Row>
      </Form>

沙盒: https://codesandbox.io/s/mystifying-pasteur-vwewz?file=/src/App.js

或者，您可以在按钮上使用mt-x类，并通过顶部边距将其向下推动，但我不建议这样做。

- codemonkey