将引导列包装在额外的 div 中 [英] Wrapping bootstrap columns in extra div

问题描述

我正在使用 bootstrap v4，当我将列包装在额外的 div 中时，布局会损坏.这是为什么?代码笔链接 http://codepen.io/mariuszdaniel/pen/aJJjzJ

作品

<div class="row"><div class="col-4"></div><div class="col-8"></div>

不工作

<div class="row"><div class="myclass"><div class="col-4"></div><div class="col-8"></div>

解决方案

发生这种情况是因为 col-* 必须 直接在row里面.

阅读Bootstrap 文档..<块引用>

"内容应该放在列内，只有列可以放在行的直接子级."

这在Bootstrap 4中特别很重要，因为如果不直接放置，列将简单地垂直堆叠/包裹> 在 .row 中.

<小时>

另请阅读:

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

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

Works

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-8"></div>
    </div>
</div>

Not working

<div class="container">
    <div class="row">
        <div class="myclass">
            <div class="col-4"></div>
            <div class="col-8"></div>
        </div>
    </div>
</div>

解决方案

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

Read the Bootstrap docs..

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

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

---

Also read:

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

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