引导表单按钮在表单 div 之外答案

【问题标题】：bootstrap form button is outside of the form div引导表单按钮在表单 div 之外
【发布时间】：2021-12-29 17:03:24
【问题描述】：

我正在使用 bootstrap 和 reactJS。

请考虑以下 sn-p：

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

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

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

【问题讨论】：

为什么不把所有东西都放在一个 div 里？
已经试过了，但是按钮还在div之外
你能在codesandbox提供你的代码吗？
@MajidM。 codesandbox.io/s/mystifying-shannon-bbdcn?file=/src/App.js
我没有在沙盒上注册，所以我希望它可以在不保存的情况下分享

标签： reactjs forms button react-bootstrap bootstrap-5

【解决方案1】：

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

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

【讨论】：

感谢伙伴，效果很好，但minHeight 必须与按钮高度相对应才能很好地适应...

【解决方案2】：

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

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

CSS 原样

.form-wrapper{
//styles here
}

【讨论】：