在Extra div中包装引导程序列 [英] Wrapping bootstrap columns in extra div

问题描述

我正在使用bootstrap v4，当我将列换成额外的div时，布局就坏了.这是为什么?链接到codepen http://codepen.io/mariuszdaniel/pen/aJJjzJ

I'm using bootstrap v4 and when I wrap columns in extra div the layout becomes broken. Why is that? Link to 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-* 必须 直接放置在 中row.

It's happening because col-* must be placed directly inside row.

阅读 Bootstrap文档..

内容应放在列中，并且只能将列 行的直接子代."

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

这在 Bootstrap 4 中特别重要，因为如果不直接放置 在.row内.

This is especially important in Bootstrap 4 because the columns will simply stack/wrap vertically if not placed directly inside a .row.

也阅读:

引导网格的工作原理
引导程序行和列-我需要使用行吗?
Bootstrap 4.0网格系统布局不起作用

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

这篇关于在Extra div中包装引导程序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！