Bootstrap 5 仪表板主内容区列间距（Gutter）设置问题求助

我基于ASP.NET搭建了一个简易仪表板，布局包含Header、侧边栏和内容区三个部分，内容区分为主内容区域和带日历链接的Coming Up/待办事项列表。

目前无法在Dashboard主内容列和Coming Up列之间创建有效的gutter（间距），以下是相关代码：

_Layout.cshtml 核心布局代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="@ViewBag.Keywords">
    <meta name="description" content="@ViewBag.Description">
    <title>
        @ViewData["Title"]
    </title>
    <partial name="_Css" />
</head>

<body>
<header>
    <partial name="_Js" />
    <partial name="_TopNav" />
</header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0" style="background-color: #1C4932">
                <partial name="_DashboardSidebar" />
            </div>
            
            <div class="col content-background">
                <div class="container-fluid">
                    <div class="row">
                        @await Component.InvokeAsync("BreadCrumb")
                        <partial name="_Alert"/>
                        <partial name="_ValidationSummary"/>
                    </div>
                    
                    <div class="row gx-1">
                        <div class="col-md-9 backgroundWhite">
                            @RenderBody()
                        </div>
                        <div class="col-md-3 backgroundWhite">
                            <partial name="_UpComingEvents"/>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@await RenderSectionAsync("Scripts", required: false)
@await Component.InvokeAsync("Notyf")
<ejs-scripts></ejs-scripts>
</body>

</html>

TopNav 代码 #

<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-light bg-white border-bottom box-shadow">
    <div class="container">
        @await Component.InvokeAsync("TenantLogo")
    </div>
    <div class="container">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                @if (User.FindFirst(x => x.Type == "name") is not null)
                {
                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Signout">@Localizer["Signout"]</a>
                    </li>
                }
                else
                {

                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Login">@Localizer["Login"]</a>
                    </li>
                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Register">@Localizer["Register"]</a>
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>

侧边栏（SideBar）代码 #

<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 mb-auto min-vh-100" style="background-color: #1C4932">
    <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <span class="fs-5 d-none d-sm-inline">Menu</span>
    </a>
    <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
        <li>
            <a asp-page="/Dashboard/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-gauge"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Dashboard"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-envelope"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Communications"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-chart-bar"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Reports"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-gear"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Settings"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-user"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Profile"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Help/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-question-circle"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Help"]</span>
            </a>
        </li>
    </ul>
</div>

面包屑导航（Bread Crumb）代码 #

<nav aria-label="breadcrumb" class="mt-2">
    <ol class="breadcrumb">
        @foreach (var breadCrumb in Model)
        {
            if (!breadCrumb.IsCurrentCrumb)
            {
                <li class="breadcrumb-item"><a asp-page="@breadCrumb.CrumbUrl">@breadCrumb.Crumb</a></li>
            }
            else
            {
                <li class="breadcrumb-item active" aria-current="page">@breadCrumb.Crumb</li>
            }
        }
    </ol>
</nav>

BackgroundWhite CSS 类 #

.backgroundWhite {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
}

问题出在两个核心点：

1. 你给row设置了gx-1，这个间距值过小（Bootstrap间距类从0到5，数值越大间距越宽），几乎无法视觉感知；
2. backgroundWhite类直接应用在列元素上，导致元素填满列的空间，列自带的padding间距被覆盖，无法体现。

修复步骤： #

1. 调整row的间距类，将gx-1替换为gx-4（或gx-3/gx-5，根据视觉需求选择）；
2. 将backgroundWhite类从列元素上移至列内部的容器，让列的padding自然成为两列之间的gutter。

修改后的内容区核心代码：

<div class="row gx-4">
    <div class="col-md-9">
        <div class="backgroundWhite">
            @RenderBody()
        </div>
    </div>
    <div class="col-md-3">
        <div class="backgroundWhite">
            <partial name="_UpComingEvents"/>
        </div>
    </div>
</div>

额外优化建议： #

• 若需要上下间距，可给row添加py-3类；
• 检查content-background类是否有设置overflow: hidden或异常padding，避免干扰内部布局；
• 如果仍需调整间距，可自定义CSS修改列的padding值，或给backgroundWhite添加margin-left/margin-right（优先用Bootstrap内置类，减少自定义样式）。

内容的提问来源于stack exchange，提问作者user351479