Question

我正在使用react-bootstrap创建一个表单。标题，datePicker和下拉列表确实显示了我希望它们的显示方式，它们在同一行中之间带有空格，但是当我尝试在这些字段下插入文本区域时，它将呈现在下拉菜单旁边。有什么问题吗？

<Form>
           <Form.Row>
                <Form.Group as={Col}>
                <Form.Control name="title"
                    type="title"
                    placeholder="Enter title"
                    value={this.state.title}
                    onChange={e => this.change(e)}  
                />
                </Form.Group>

                <Form.Group as={Col}>
                    <DatePicker
                        selected={this.state.startDate}
                        onChange={e => this.change(e)}
                    />
                </Form.Group>

                <Form.Group as={Col}>
                    <select className="custom-select" name="course" value={this.state.course} onChange={e => this.change(e)}>
                        <option value="Math234">Math234</option>
                        <option value="Art">Art</option>
                    </select>
                </Form.Group>
            </Form.Row>

            <Form.Group>
                <Form.Label>Enter notes</Form.Label>
                    <Form.Control 
                        name = "notes"
                        as="textarea" 
                        rows="3" 
                        value={this.state.notes}
                        onChange={e => this.change(e)}
                    />
            </Form.Group>
        </Form>

Answer 1

您必须定义每个Col的大小。如果您不告诉他们每个断点或至少一个断点的axact大小，那么引导项将并排渲染。在这种情况下，您的Form.Group将获得col以及所有其他与列相关的类名。

尝试这样的事情：

<Form.Row>
  <Form.Group as={Col} sm={12}>
    {/* your form control goes here */}
  </Form.Group>
</Form.Row>

在这种情况下，xs，sm，md和lg断点道具都可用，请根据需要使用它们。

react-boostrap表单字段并排渲染，而不是一个在另一个下面

1 个答案: