让 React Bootstrap 表单出现在同一行

Question

由于表单标签字符串长度的不同，React-Bootstrap 中的表单在同一行上没有对齐，我在样式方面有一点问题。这是我的 JSX：

return 
    (<Card style={{ marginTop: "25px" }}>
      <Card.Body>
        <Row>
          <Col>
            <Form>
              <Form.Group controlId="goalSupremacy"></Form.Group>
              <Form.Label>Goals Suprem</Form.Label>
              <Form.Control
                type="number"
                id="supremacyInput"
                name="supremacy"
                step="0.01"
                value={goalsSupremacy}
                min="-7.5"
                max="7.5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setGoalsSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalGoals"></Form.Group>
              <Form.Label>Goals Total</Form.Label>
              <Form.Control
                type="number"
                id="totalGoalsInput"
                name="totalGoals"
                step="0.01"
                value={totalGoals}
                min="0"
                max="15"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalGoals(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="cornerSupremacy"></Form.Group>
              <Form.Label>Corner Suprem</Form.Label>
              <Form.Control
                type="number"
                id="cornerSupremacyInput"
                name="cornerSupremacy"
                step="0.25"
                value={cornersSupremacy}
                min="-7.5"
                max="7.5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setCornersSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalCorners"></Form.Group>
              <Form.Label>Corners Total</Form.Label>
              <Form.Control
                type="number"
                id="totalCornersInput"
                name="totalCorners"
                step="0.25"
                value={totalCorners}
                min="0"
                max="15"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalCorners(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="bookingsSupremacy"></Form.Group>
              <Form.Label>Cards Suprem</Form.Label>
              <Form.Control
                type="number"
                id="bookingsSupremacyInput"
                name="bookingsSupremacy"
                step="0.01"
                value={bookingsSupremacy}
                min="-5"
                max="5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setBookingsSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalBookings"></Form.Group>
              <Form.Label>Cards Total</Form.Label>
              <Form.Control
                type="number"
                id="totalBookingsInput"
                name="totalBookings"
                step="0.01"
                value={totalBookings}
                min="0"
                max="10"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalBookings(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="homeRedPercentage"></Form.Group>
              <Form.Label>Home Red %</Form.Label>
              <Form.Control
                type="number"
                id="homeRedInput"
                name="homeRed"
                step="0.01"
                value={homeExpectedRed}
                min="0"
                max="1"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setHomeExpectedRed(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="awayRedPercentage"></Form.Group>
              <Form.Label>Away Red %</Form.Label>
              <Form.Control
                type="number"
                id="awayRedInput"
                name="awayRed"
                step="0.01"
                value={awayExpectedRed}
                min="0"
                max="1"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setAwayExpectedRed(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
        </Row>
        <Row>
          <Col style={{ marginTop: "12.5px" }}>
            <Button
              onClick={() => {
                calculate();
              }}
            >
              Calculate
            </Button>
          </Col>
        </Row>
      </Card.Body>
    </Card>)

以及问题的图像。如您所见，Home Red 和 Away Red 中的表格不匹配。我不擅长 CSS 或样式，所以这里需要做什么才能对齐表单？如果可能的话，最好是响应式解决方案...

Answer 1

将表单设为 5 行，第 1 行和第 3 行包含标题，第 2 和第 4 行包含字段，第 5 行包含按钮。

我承认这是一个相当随意的平均解决方案，但它应该可以满足您的要求，而且我想不出它会如何响应