React material-ui 和 reactstrap 表单与按钮新行内联

Question

如何让表单元素内联，但提交按钮在新行中？

import {
    Button,
    Form,
    Label,
    Input,
    Card,
    CardText,
    CardBody,
    CardTitle,
    Col, Badge
} from 'reactstrap';
import { 
    FormControlLabel, Checkbox, FormGroup
} from '@material-ui/core';

...

<Form inline>
    <FormGroup className="mr-10 mb-10">
        <Label for="initLateFee" className="mr-sm-10">Initial Late Fee</Label>
        <Input type="number" name="initLateFee" id="initLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="dailyLateFee" className="mr-sm-10">Daily Late Fee</Label>
        <Input type="number" name="dailyLateFee" id="dailyLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="applyOn" className="mr-sm-10">Apply On Day</Label>
        <Input type="number" name="applyOn" id="applyOn" placeholder="0" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="maxLateFee" className="mr-sm-10">Max Late Fee</Label>
        <Input type="number" name="maxLateFee" id="maxLateFee" placeholder="0.00" />
    </FormGroup>
    <div className="row">
        <Button type="submit" color="primary">Update</Button>
    </div>
</Form>

我想在新行中添加“提交”按钮，但属于 <Form>

Answer 1

如果您想在单个水平行上进行多个输入，请使用网格系统。

<Form>
  <div className="row">
    <div className="col">
      <FormGroup>
        <Label>First Name</Label>
        <Input name="firstName" />
      </FormGroup>
    </div>
    <div className="col">
      <FormGroup>
        <Label>Last Name</Label>
        <Input name="lastName" />
      </FormGroup>
    </div>
  </div>
  <Button type="submit">
    Submit
  </Button>
</Form>

React material-ui 和 reactstrap 表单与按钮新行内联

React material-ui and reactstrap form inline with button new line

reactjs

material-ui

reactstrap