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

Question

我下面的反应 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>
     );
   }

Answer 1

使用 boostrap 的 d-flex class。你只需要 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 classes，然后用上边距将其向下推，但我不建议这样做。

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

React Bootstrap - Button to be inline with text input with label overhead

css

forms

reactjs

react-bootstrap