如何在Bootstrap中设置静态侧边栏与主内容区之间的间距？

方法一：使用Bootstrap原生布局类快速解决 #

不需要修改Sass变量，直接利用Bootstrap内置的布局工具实现：

• 用row和col-xx划分侧边栏与主内容的宽度，保证布局结构合规
• 给主内容区域添加ms-*（margin-start）类设置左侧间距，比如ms-4对应1.5rem的间距，可根据需求选择ms-3/ms-5等
• 给侧边栏添加z-10类提升层级，避免主内容卡片被侧边栏覆盖

示例代码：

<div class="container-fluid">
  <div class="row">
    <!-- 静态侧边栏 -->
    <div class="col-md-3 position-sticky z-10" style="top: 0; height: 100vh;">
      <!-- 侧边栏内容 -->
    </div>
    <!-- 主内容区域 -->
    <div class="col-md-9 ms-4">
      <!-- 主内容卡片等元素 -->
    </div>
  </div>
</div>

方法二：通过Bootstrap Sass变量定制全局/局部间距 #

如果需要统一定制项目中的间距规则，可修改Bootstrap Sass的内置变量：

1. 调整全局网格间距：修改$grid-gutter-width变量，该变量控制所有列之间的默认间距

// 在引入Bootstrap Sass前定义变量
$grid-gutter-width: 2rem; // 默认值为1.5rem，按需调整

@import "bootstrap";

2. 单独定制侧边栏与主内容的间距：自定义变量并应用到对应类

$sidebar-content-gap: 2rem;

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: $zindex-sticky; // 使用Bootstrap内置层级变量，避免硬写数值
}

.main-content {
  margin-left: $sidebar-content-gap;
}

关键注意点 #

• 侧边栏的position-sticky生效需要设置top值和合适的高度（比如height: 100vh）
• 层级问题优先使用Bootstrap内置的z-*类或$zindex-*变量，保持风格统一

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