在 Bootstrap 4 中的列之间添加 space

Question

我希望它看起来像什么：

我正在尝试在 BS4 的列之间添加水平和垂直 space，但它要么保持混乱的断点（黑色或红色），要么保持 bootstrap 的断点。有什么简单的方法可以添加 space 吗？我已经尝试了 BS4 的新边距设置，但它并没有真正帮助（弄乱了标题和 background-color）。此外，2 个水平列应具有相同的高度。

顺便说一句。如果您运行代码段，则由于代码段输出的大小，列无法正确显示。这就是它在 non-mobile 上的样子：screenshot（或展开代码段）

* {
  color: white;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

nav {
  background-color: antiquewhite;
  margin: 0px;
}

.row {}

.head {
  background-color: aqua;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
  Nav
</nav>
 <div class="container-fluid">
        <div class="row p-1">
            <div class="col black">
                <div class="row">
                    <div class="col head">
                        HEADING 0 COLUMN
                    </div>
                </div>
                <p>aaaa<br>
                aaaa</p>
            </div>
        </div>
        <div class="row row-eq-height p-1">
            <div class="col-md-6 black">
                <div class="row">
                    <div class="col head">
                        HEADING 1 COLUMNS BLACK
                    </div>
                </div>bbbb<br>
                bbbb<br>
            </div>
            <div class="col-md-6 red">
                <div class="row">
                    <div class="col head">
                        HEADING 2 CLOUMNS RED
                    </div>
                </div>cccc
            </div>
        </div>
        <div class="row p-1">
            <div class="col black">
                dddd
            </div>
        </div>
        <div class="row p-1">
            <div class="col black">
                eeee
            </div>
        </div>
        <div class="row row-eq-height p-1">
            <div class="col-md-6 black">
                <div class="row">
                    <div class="col head">
                        HEADING 3 COLUMNS BLACK
                    </div>
                </div>ffff<br>
                ffff<br>
            </div>
            <div class="col-md-6 red">
                <div class="row">
                    <div class="col head">
                        HEADING 4 CLOUMNS RED
                    </div>
                </div>hhhh
            </div>
        </div>
    </div>

Answer 1

对于间距 Bootstrap 4 具有响应间距 classes p-*（用于填充）和 m-*（用于边距）。

因此，在您的情况下，您可以通过向所有列添加 p-1 或 p-2 来进行试验，以达到预期的效果。

注意：Bootstrap 间距 class 是基于 rem 单位，而不是 px 因为 px 是旧的和过时的方式在响应式设计和可访问性方面做事。

这是给你的参考link：

https://getbootstrap.com/docs/4.0/utilities/spacing/

以下代码片段通过使用嵌套以及 m-1 class 在列周围创建边距来产生所需的结果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
    * {
        color: white;
    }

    .black {
        background-color: black;
    }

    .red {
        background-color: red;
    }

    nav {
        background-color: antiquewhite;
        margin: 0px;
    }
    .head {
        background-color: aqua;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 0 COLUMN
                        </div>
                    </div>
                    <p>aaaa<br>
                        aaaa</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-eq-height">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 1 COLUMNS BLACK
                        </div>
                    </div>

                    bbbb<br>
                    bbbb<br>

                </div>
            </div>
        </div>
        <div class="col-12 col-md m-1">
            <div class="row h-100">
                <div class="col red">
                    <div class="row">
                        <div class="col head">
                            HEADING 2 CLOUMNS RED
                        </div>
                    </div>cccc
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    dddd
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    eeee
                </div>
            </div>
        </div>
    </div>
    
    <div class="row row-eq-height">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 3 COLUMNS BLACK
                        </div>
                    </div>

                    ffff<br>
                    ffff<br>

                </div>
            </div>
        </div>
        <div class="col-12 col-md m-1">
            <div class="row h-100">
                <div class="col red">
                    <div class="row">
                        <div class="col head">
                            HEADING 4 CLOUMNS RED
                        </div>
                    </div>hhhh
                </div>
            </div>
        </div>
    </div>
</div>

在 Bootstrap 4 中的列之间添加 space

Adding space between columns in Bootstrap 4

html

css

spacing

twitter-bootstrap

bootstrap-4