无法让 React Bootstrap 按钮跨越列的整个宽度答案

【问题标题】：Can't get React Bootstrap button to span full width of column无法让 React Bootstrap 按钮跨越列的整个宽度
【发布时间】：2019-05-30 00:23:30
【问题描述】：

我正在使用 React Bootstrap Container、Row 和 Column 元素来布局我拥有的表单。

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

我想要它，以便按钮跨越它们所在列的整个长度，无论它们包含什么文本，它们的距离都相等。

但不知道如何做到这一点。在 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">，但这并没有什么不同。

【问题讨论】：

标签： react-bootstrap

【解决方案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>

【讨论】：