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

发布时间：2020-12-18 00:18:17 所属栏目：安全来源：网络整理

导读：我正在使用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 c

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!