Не удается получить кнопку React Bootstrap, чтобы охватить всю ширину столбца

Question

Я использую элементы React Bootstrap Container, Row и Column для создания формы, которая у меня есть.

У меня есть одна строка, которая содержит 2 столбца с кнопкой внутри. Эти кнопки генерируются из состояния.

Мне бы хотелось, чтобы кнопки охватывали всю длину столбца, в котором они находятся, чтобы они были одинаково удаленными независимо от текста, который они содержат.

Но не могу понять, как это сделать. В документации по реагированию на загрузку говорится, что это должно быть возможно с помощью атрибута блока.

Ниже мой код.

//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, а также использовал встроенный класс d-flex для ButtonGroup.

<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>