Bootstrap 中的嵌套行的宽度不正确

Question

我阅读了以下内容：How can I get a Bootstrap column to span multiple rows?，但无法完全复制显示的内容。

这是我最终得到的结果：https://codepen.io/saka-rauka1/pen/MWodjao?editors=0010

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 的宽度与非嵌套按钮的宽度不同。 1 和 0 按钮的宽度是正确的，通过将它们与“a”、“b”或“c”按钮进行比较可以看出，但 2-5 和 6-9 块太窄了。

谁能指出我遗漏了什么？

Answer 1

所以有人告诉我，发生这种情况的原因是 bootstrap 提供了一个相对维度，并且相关行嵌套在一个 div 中。将 col-4 更改为 col 修复了它。