React Bootstrap - 按钮与带有标签开销的文本输入内联

【问题标题】：React Bootstrap - Button to be inline with text input with label overheadReact Bootstrap - 按钮与带有标签开销的文本输入内联
【发布时间】：2021-06-10 22:11:11
【问题描述】：

我下面的反应引导代码导致提交按钮与具有标签开销的输入字段不一致 - 有没有办法让提交按钮与文本字段一致

    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>
     );
   }

【问题讨论】：

标签： css reactjs forms react-bootstrap

【解决方案1】：

使用 boostrap 的 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 类，然后将其向下按上边距，但我不建议这样做。

【讨论】：