React Bootstrap - 微调器和按钮在一行

Question

您好，我使用react-bootstrap、mdbootstrap 和formik 创建一个登录表单。我希望每次用户按下登录按钮时都会显示登录微调器。我已经弄清楚了如何做到这一点，但是我在将引导旋转器与登录按钮放在同一行时遇到了麻烦

\n\n

我想要实现这样的目标\n

\n\n

这是我的代码

\n\n

render() {\n        return (\n            <Formik\n                validationSchema={schema}\n                onSubmit={this.handleSubmit}\n                initialValues={{username: \'\', password: \'\'}}>\n                {\n                    formProps => (\n                        <Form name=\'form\' onSubmit={formProps.handleSubmit}>\n                            <Form.Group noValidate controlId="loginForm.username">\n                                <Form.Label>Adres e-mail</Form.Label>\n                                <Form.Control\n                                    type="text"\n                                    name="username"\n                                    value={formProps.values.username}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {username} = formProps.initialValues;\n                                        if (formProps.values.username === username) {\n                                            formProps.setFieldTouched(\'username\', false)\n                                        }\n                                    }}\n                                    isInvalid={!!formProps.touched.username && !!formProps.errors.username}\n                                />\n                                <Form.Control.Feedback type="invalid">\n                                    {formProps.errors.username}\n                                </Form.Control.Feedback>\n                            </Form.Group>\n                            <Form.Group controlId="loginForm.password">\n                                <Form.Label>Has\xc5\x82o</Form.Label>\n                                <Form.Control\n                                    type="password"\n                                    name="password"\n                                    value={formProps.values.password}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {password} = formProps.initialValues;\n                                        if (formProps.values.password === password) {\n                                            formProps.setFieldTouched(\'password\', false)\n                                        }\n                                    }}\n                                    isInvalid={!!formProps.touched.password && !!formProps.errors.password}\n                                >\n                                </Form.Control>\n                                <Form.Control.Feedback type="invalid">\n                                    {formProps.errors.password}\n                                </Form.Control.Feedback>\n                            </Form.Group>\n                            <Form.Group controlId="loginForm.loginBtn">\n                                <div className="d-inline-block">\n                                <Button variant="primary" type="submit">\n                                    Zaloguj si\xc4\x99\n                                </Button>\n                                <Spinner animation="border" variant="info" />\n                                </div>\n                            </Form.Group>\n                        </Form>\n                    )\n                }\n            </Formik>\n        )\n    }\n

\n\n

编辑：coeden：codesandbox.io/s/quirky-blackburn-z7gtt

\n

Answer 1

您可以使用<div class="d-flex align-items-center">而不是<div className="d-inline-block">作为按钮和微调器的包装。