在额外的 div 中包装引导列

【问题标题】：Wrapping bootstrap columns in extra div在额外的 div 中包装引导列
【发布时间】：2017-08-01 02:49:07
【问题描述】：

我正在使用 bootstrap v4，当我将列包装在额外的 div 中时，布局会损坏。这是为什么？链接到codepenhttp://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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

发生这种情况是因为col-* 必须直接放在row 中。

阅读Bootstrap docs..

"内容应该放在列中，并且只有列可以行的直接子代。”

这在 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

【讨论】：

谢谢。我一定是以某种方式忽略了这一点。
有解决方法吗？我需要这个额外的 div，但我希望引导程序“忽略”它。