Bootstrap 4 间距答案

【问题标题】：Bootstrap 4 spacingBootstrap 4 间距
【发布时间】：2020-10-06 09:56:40
【问题描述】：

新手引导。我在下面有这个 HTML。如何在笔记本电脑/台式机屏幕上使所有盒子元素之间的间距均匀而不使它们中的任何一个包裹？我在使用 CSS-grid 之前这样做了。但我现在需要使用 bootstrap 4。我在网格内为我的主要内容创建了一个网格。（屏幕的右侧）我希望所有这些元素在所有 4 个边上都有均匀的间距。我最终将在嵌套网格的第一行下方放置一个 2 列行。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>Basic HTML File</title>
    <style>
        html, body {
            height: 100%;
        }
        .header {
            background: pink;
        }
        .sidebar {
            background: gray;
            height: 100%;
        }
        .content {
            background: lightgrey;
            height: 100%;
        }
        .box-1 {
            background: coral;
        }
        .box-2 {
            background: aquamarine;
        }
        .box-3 {
            background: darkkhaki;
        }
        .box-4 {
            background: cornflowerblue;
        }
    </style>

</head>
<body>

<div class="container-fluid h-100">

    <div class="row" style="height: 80px;">
        <div class="col header">header</div>
    </div>

    <div class="row h-100">
        <div class="col-3 col-lg-2 sidebar h-100">sidebar</div>
        <div class="col-9 col-lg-10 content h-100">
            <div class="row h-25 boxes">
                <div class="col-3 box-1">
                    box1
                </div>
                <div class="col-3 box-2">
                    box2
                </div>
                <div class="col-3 box-3">
                    box3
                </div>
                <div class="col-3 box-4">
                    box-4
                </div>

            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

【问题讨论】：

标签： html css web bootstrap-4 frontend

【解决方案1】：

不只是调整填充，你可能不得不修改它有点像this mdbootstrap。

div.h-25>div {
  margin-left: 1.333333333333%;
}

div.h-25 > div:first-child {
  margin-left: 0;
}

.col-3 {
  max-width: 24%;
}

【讨论】：