twitter-bootstrap – 在额外的div中包装bootstrap列

我正在使用bootstrap v4,当我在额外的div中包装列时,布局会被破坏.这是为什么？链接到codepen http://codepen.io/mariuszdaniel/pen/aJJjzJ

作品

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-8"></div>
    </div>
</div>

不工作

<div class="container">
    <div class="row">
        <div class="myclass">
            <div class="col-4"></div>
            <div class="col-8"></div>
        </div>
    </div>
</div>

解决方法

这是因为col- *必须直接放在行内.

阅读Bootstrap docs ..

“Content should be placed within columns,and only columns may be
immediate children of rows.”

这在Bootstrap 4中尤为重要,因为如果不直接放在.row中,列将只是垂直堆叠/包裹.

另请阅读：

How the Bootstrap Grid Works
Bootstrap Rows and Columns – Do I need to use row?
Bootstrap 4.0 Grid System Layout not working