如何讓我的所有單選按鈕答案與ReactBootstrap垂直排列

我有這個表格：

<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>

我希望所有答案都垂直排列在右側，因此每個答案都可以查看您必須從多少個選項中進行選擇。但是，它們會像下圖一樣繼續排列。我該如何解決？我錯過了一個選項嗎？

uj5u.com熱心網友回復：

這個布局看起來不錯，只有 <form.check 元素有問題，因為這些元素是行內元素，都是欄位一個接一個出現

您可以通過將 <Form.check 欄位與 Row 如下所示來實作預期的布局

  <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>

這種布局更改應該可以解決您的問題。

標籤：反应 形式 反应引导

上一篇：使用普通Javascript將變數放入表單中

下一篇：如何在Vuejs中留下已經填寫好的編輯表單？