Поля формы React-boostrap отображаются рядом друг с другом, а не под другим - PullRequest
Новая
       9

Поля формы React-boostrap отображаются рядом друг с другом, а не под другим

0 голосов
/ 22 марта 2019

Я использую реагирующую загрузку для создания формы.Заголовок, указатель даты и раскрывающийся список отображаются так, как я хочу, в одной строке с пробелом между ними, но когда я пытаюсь вставить текстовую область под этими полями, он отображается рядом с раскрывающимся меню.В чем проблема? 

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

1 Ответ

2 голосов
/ 26 марта 2019

Вы должны определить размер каждого Col.Кольца начальной загрузки отрисовываются бок о бок, если вы не укажете им размер аксакта для каждой точки останова или хотя бы одну.В этом случае ваш Form.Group получит col и все другие связанные с столбцами имена классов.

Попробуйте что-то вроде этого: 

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

xs, sm, md и lg все реквизиты точки останова доступны в этом случае, используйте их по своему желанию.

...