bootstrap 表单按钮在表单之外 div

Question

我正在使用 bootstrap 和 reactJS。

请考虑以下代码段：

<Form>
    <!--some stuff-->
    <Button type='submit'>
</Form>

按钮呈现在我的表单之外，如下所示：

请问如何将我的按钮放入我的表单中？我正在使用 sass ，因此如果需要我可以覆盖 bootstrap 属性。

Answer 1

您可以像这样将所有内容包装在 div 中

<FormWrapper class='form-wrapper'>
 <Form>
    <!--some stuff-->
 </Form>
 <Button type='submit'>
</FormWrapper>

CSS这样

.form-wrapper{
//styles here
}

Answer 2

只需用 FormGroup 包裹并添加 minHeight 即可：

<FormGroup style={{ minHeight: "50px" }} className="mb-2">
  <Button className="float-end" type="submit" variant="outline-primary">
    Submit
  </Button>
</FormGroup>

bootstrap 表单按钮在表单之外 div

bootstrap form button is outside of the form div

forms

button

reactjs

react-bootstrap

bootstrap-5