在额外 div 中包装 bootstrap 列

Question

我正在使用 bootstrap v4，当我在额外的 div 中包装列时，布局被破坏了。这是为什么？ Link 到 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>

Answer 1

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

阅读Bootstrap docs..

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

这在 Bootstrap 4 中尤其重要，因为如果不放置，列将简单地 stack/wrap 垂直直接里面一个.row.

另读:

How the Bootstrap Grid Works
Bootstrap Rows and Columns - Do I need to use row?

在额外 div 中包装 bootstrap 列

Wrapping bootstrap columns in extra div

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4