InputGroup не занимает оставшееся место

Question

Я использую реагирующую загрузку с проектом, и один компонент имеет код, как показано ниже. Я хочу, чтобы вход и кнопка появлялись вместе и занимали все пространство, предоставленное Col . Они оба (вход и кнопка) отображаются вместе, но все пространство не занято. Пожалуйста, помогите!

<Row>
        <Col  xs={12} md={10} mdOffset={1} >

            <Form className="addGoalForm" inline onSubmit={
                handleSubmit
            } >
                <FormGroup className="addGoalForm">
                    <InputGroup>
                        <FormControl ref={textInput} type="text"/>

                    </InputGroup>
                    <Button bsStyle="primary" type="submit"> Add Goal </Button>
                </FormGroup>



            </Form>

        </Col>
        </Row>

Answer 1

Проблема:

Проблема с вашим кодом состоит в том, что вы создали внешний столбец и добавили в него два элемента, они будут просто располагаться слева - это поведение по умолчанию.

Решение:

Добавить размер столбца для ввода и кнопки.

Как?

1. Bootstrap col-xs-10 для ввода и col-xs-2 для кнопки, чтобы занять col-xs-12 родителя (учитывайте размер вашей сетки для размеров md, l)
2. Создание пользовательских классов с шириной 80% / 20% или по мере необходимости.

Answer 2

Попробуйте снять inline опору с формы