如何让我所有的单选按钮答案与 React 垂直排列 Bootstrap

Question

我有这个表格：

<Form.Group
                                as={Row}
                                name="formDemoYears"
                                controlId="formDemoYears"
                                onChange={this.props.handleChangeAsInt}
                                >
                                <Form.Label column sm={5}>
                                    1. How long have you worked for the organization?
                                    </Form.Label>
                                    <Col>
                                <Form.Check
                                    inline
                                    type="radio"
                                    label="Less than one year"
                                    value="Less than one year"
                                    name="formDemoYears"
                                    id="formDemoYears-1"
                                    defaultChecked={this.props.formDemoYears === "Less than one year"}
                                />
                                <Form.Check
                                    inline
                                    type="radio"
                                    label="One year to less than two years"
                                    value="One year to less than two years"
                                    name="formDemoYears"
                                    id="formDemoYears-2"
                                    defaultChecked={this.props.formDemoYears === "One year to less than two years"}
                                />
                                <Form.Check
                                    inline
                                    type="radio"
                                    label="Two years to less than five years"
                                    value="Two years to less than five years"
                                    name="formDemoYears"
                                    id="formDemoYears-3"
                                    defaultChecked={this.props.formDemoYears === "Two years to less than five years"}
                                />
                                <Form.Check
                                    inline
                                    type="radio"
                                    label="Five years to less than ten years"
                                    value="Five years to less than ten years"
                                    name="formDemoYears"
                                    id="formDemoYears-4"
                                    defaultChecked={this.props.formDemoYears === "Five years to less than ten years"}
                                />
                                <Form.Check
                                    inline
                                    type="radio"
                                    label="Ten years or more"
                                    value="Ten years or more"
                                    name="formDemoYears"
                                    id="formDemoYears-5"
                                    defaultChecked={this.props.formDemoYears === "Ten years or more"}
                                />
                                </Col>
                                </Form.Group>

我希望所有答案都在右侧垂直排列，这样每个答案都可以看到您有多少选项可供选择。然而，他们一直像下图一样排队。我该如何解决？我错过了一个选项吗？

Answer 1

这个布局似乎没问题，只有

您只需将

  <Row>
    <Form.Check
      inline
      type="radio"
      label="One year to less than two years"
      value="One year to less than two years"
      name="formDemoYears"
      id="formDemoYears-2"
    />
  </Row>

此布局更改应该可以解决您的问题。