在Bootstrap 4中的列之间添加空格

Question

我希望它看起来像:

我正在尝试在BS4中的列之间添加水平和垂直空间,但它会保持乱码(黑色或红色)或引导程序的断点.有没有简单的方法来增加空间？我已经尝试了BS4的新边距设置,但它没有真正帮助(搞砸了标题和背景颜色).此外,2个水平列应具有相同的高度.

顺便说一句.如果您运行代码段,则由于代码段输出的大小,列无法正确显示.这就是非移动设备应该是什么样子:截图(或展开代码片段)

* {
  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具有响应间隔类p-*(用于填充)和m-*(用于边距).

因此,在您的情况下,您可以通过添加p-1或可能p-2对所有列进行实验来实现所需的效果.

注意:Bootstrap间距类是基于rem单位而不是基于单位,px因为px在响应式设计和可访问性方面,这是旧的和过时的做事方式.

这是您的参考链接:

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

以下代码段通过使用嵌套以及m-1类来创建所需的结果,以创建列周围的边距:

<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>