Bootstrap嵌套行宽度不正确，无法与非嵌套按钮宽度对齐

我查阅了相关资料后尝试实现Bootstrap列跨多行的效果，但没有完全复现预期效果。
我最终实现的代码如下：

render() {
    return (
        <div className="container-fluid">
            <div className="row">
                <button id="1" className="col-4">1</button>
                <div className="col-8">
                    <div className="row">
                        <button id="2" className="col-4">2</button>
                        <button id="3" className="col-4">3</button>
                    </div>
                    <div className="row">
                        <button id="4" className="col-4">4</button>
                        <button id="5" className="col-4">5</button>
                    </div>
                </div>
            </div>
            <div className="row">
                <button id="a" className="col-4">a</button>
                <button id="b" className="col-4">b</button>
                <button id="c" className="col-4">c</button>
            </div>
            <div className="row">
                <div className="col-8">
                    <div className="row">
                        <button id="6" className="col-4">6</button>
                        <button id="7" className="col-4">7</button>
                    </div>
                    <div className="row">
                        <button id="8" className="col-4">8</button>
                        <button id="9" className="col-4">9</button>
                    </div>
                </div>
                <button id="0" className="col-4">0</button>
            </div>
        </div>
    );
}

目前出现的异常是：包含嵌套行的div内的按钮宽度和非嵌套按钮宽度不一致。和a、b、c按钮对比可知，1和0按钮宽度正常，但是2_5、69区块的按钮宽度过窄，请问遗漏了什么配置？

问题原因 #

Bootstrap栅格系统的嵌套列宽度基于父级列的有效宽度计算，子行内的列宽规则始终是将父级列的总宽度拆分为12份分配。你当前代码的核心问题是嵌套行内的列数总和不足12：
你在宽度为全局行宽8/12的col-8容器内，仅放置了两个col-4按钮，二者总占比仅为父级宽度的8/12，剩余4/12的空间留空，自然会导致按钮宽度比全局col-4的按钮更窄。
如果不需要栅格默认的左右间隙，可给行添加g-0（Bootstrap 5）或no-gutters（Bootstrap 4）类，消除padding带来的细微宽度差。

修复方案 #

将嵌套行内的两个按钮的类从col-4改为col-6，两个col-6刚好占满父级col-8的全部12份宽度，此时每个按钮的实际宽度为父级col-8的1/2，换算后为全局行宽的4/12，和全局col-4的按钮宽度完全一致。

修复后代码 #

render() {
    return (
        <div className="container-fluid">
            <div className="row">
                <button id="1" className="col-4">1</button>
                <div className="col-8">
                    <div className="row">
                        <button id="2" className="col-6">2</button>
                        <button id="3" className="col-6">3</button>
                    </div>
                    <div className="row">
                        <button id="4" className="col-6">4</button>
                        <button id="5" className="col-6">5</button>
                    </div>
                </div>
            </div>
            <div className="row">
                <button id="a" className="col-4">a</button>
                <button id="b" className="col-4">b</button>
                <button id="c" className="col-4">c</button>
            </div>
            <div className="row">
                <div className="col-8">
                    <div className="row">
                        <button id="6" className="col-6">6</button>
                        <button id="7" className="col-6">7</button>
                    </div>
                    <div className="row">
                        <button id="8" className="col-6">8</button>
                        <button id="9" className="col-6">9</button>
                    </div>
                </div>
                <button id="0" className="col-4">0</button>
            </div>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者saka-rauka1