Question

我正在使用React Bootstrap容器，行和列元素来布局我拥有的表单。

我有一行，每行包含2列，每列中有一个按钮。这些按钮是从状态生成的。

我希望它能使按钮跨越它们所在的列的整个长度，因此无论它们包含什么文本，都应等距分布。

但是无法解决该问题。在react bootstrap文档中，它说应该可以通过使用block属性来实现。

下面是我的代码。

//This is the state, the values for label are hardcoded for now, //but would be dynamic.

 state = {
        teamSelection: {
            teamAName: {
                elementType: 'button',
                label: 'Trail Blazers',
                selected: "true"
            },
            teamBName: {
                elementType: 'button',
                label: 'Warriors',
                selected: true
            }
        }
    }

//This generates the formElementArray to be used below.

 const formElementsArray = [];
        for (let key in this.state.teamSelection) {
            formElementsArray.push({
                id: key,
                config: this.state.teamSelection[key]
            });
        }

matchResultInputForm = (
            <Form >
                <Container fluid>
                    <Row>
                        <ButtonGroup>
                            {formElementsArray.map(formElement => (
                                <Col>
                                    <Button
                                        key={formElement.id}
                                        className="mr-1"
                                        color="primary"
                                        block
                                        size="lg"
                                        label={formElement.config.label}
                                        selectedteam={this.state.selectedteam}>{formElement.config.label}</Button>
                                </Col>
                            ))}
                        </ButtonGroup>
                    </Row>
                    ...

因此，当前按钮无法覆盖列的整个宽度，并且会根据文本自动调整大小。

我已经看到这里还有其他一些类似的问题，但是这些问题的解决方案对我不起作用。

例如，我尝试将ButtonGroup更改为div并使用<div class="btn-group d-flex" role="group">，但这没什么不同。

Answer 1

我能够解决这个问题。

我将列更改为ButtonGroup之外，还为ButtonGroup使用了内置的d-flex。

<Row>
    <Col>
    <ButtonGroup className="d-flex">
        {formElementsArray.map(formElement => (
                <Button
                    key={formElement.id}
                    className="btn-block mr-1 mt-1 btn-lg"
                    color="primary"
                    block
                    label={formElement.config.label}
                    selectedteam={this.state.selectedteam}>{formElement.config.label}</Button>

        ))}
    </ButtonGroup>
    </Col>
</Row>

无法使React Bootstrap按钮跨越列的整个宽度

1 个答案: