InputGroup 不占用剩余空间答案

【问题标题】：InputGroup not taking remaining spaceInputGroup 不占用剩余空间
【发布时间】：2018-10-09 17:57:58
【问题描述】：

我在一个项目中使用 react-bootstrap，其中一个组件的代码如下。我希望输入和按钮一起出现并占据 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>

【问题讨论】：

标签： css twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

尝试从表单中移除 inline 属性

【讨论】：

不工作。将按钮移动到下一行。
同时将按钮移动到 InputGroup 中

【解决方案2】：

问题：

您的代码的问题是，您创建了一个外部列，并在其中添加了两个元素，它们只会堆叠到左侧 - 这是默认行为。

解决方案：

为输入和按钮添加列大小。

怎么做？

引导 col-xs-10 用于输入，col-xs-2 用于按钮以占据父级的 col-xs-12（考虑 md 的网格大小，l 大小）
根据需要创建宽度为 80%/20% 的自定义类。

【讨论】：