小编sev*_*sev的帖子

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

我希望它看起来像:

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

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

* {
  color: white;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

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

.row {}

.head {
  background-color: aqua;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css spacing twitter-bootstrap bootstrap-4

sev*_*sev

2018 02-17

5
推荐指数

1
解决办法

2万
查看次数