Question

我正在使用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>

Answer 1

这种情况正在发生，因为col-* 必须直接放在<{1}}内。

阅读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中包装bootstrap列

1 个答案: