Bootstrap 4の列間にスペースを追加する

Question

私はそれを次のように見せたい：

BS4の列間に水平および垂直のスペースを追加しようとしていますが、ブレークポイント（黒または赤）またはブートストラップのブレークポイントを混乱させ続けています。スペースを追加する簡単な方法はありますか？ BS4の新しいマージン設定を試しましたが、実際には役に立ちませんでした（見出しと背景色を台無しにしました）。また、2つの水平列は同じ高さでなければなりません。

ところで。スニペットを実行すると、スニペット出力のサイズが原因で列が正しく表示されません。それは、非モバイルでは次のように見えるはずです： 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には、応答する間隔クラス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>