Question

我正在使用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>

Answer 1

尝试从表单

中删除inline道具

Answer 2

<强>问题：

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

解决方案：

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

如何吗

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

InputGroup没有占用剩余空间

2 个答案: