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中。把col4改成col修复了这个问题。