Bootstrap5左侧导航栏与主内容区之间的异常空白问题求助

算力阿峰

2026-4-28

Bootstrap 5 侧边栏与主内容区域间异常空白的原因及解决方法

问题描述

我使用Bootstrap 5构建了带有左侧导航栏的页面布局后，发现导航栏与主内容区域之间存在一块异常的空白空间。相关代码如下：

HTML代码

<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
  <link href="./css/navlayout.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"> 
  <link rel="icon" href="./img/icon.png" /> 
  <title>Basic - Bootstrap 5 with Gulp 4</title> 
</head> 
<body id="body-pd"> 
  <header class="header" id="header"> 
    <div class="header_toggle"> 
      <i class='bx bx-menu' id="header-toggle"></i> 
    </div> 
    <div class="header_img"> 
      <img src="https://i.imgur.com/hczKIze.jpg" alt=""> 
    </div> 
  </header> 
  <div class="l-navbar" id="nav-bar"> 
    <nav class="nav"> 
      <div> 
        <a href="#" class="nav_logo"> 
          <i class='bx bx-layer nav_logo-icon'></i> 
          <span class="nav_logo-name">BBBootstrap</span> 
        </a> 
        <div class="nav_list"> 
          <a href="#" class="nav_link active"> 
            <i class='bx bx-grid-alt nav_icon'></i> 
            <span class="nav_name">Dashboard</span> 
          </a> 
          <a href="#" class="nav_link"> 
            <i class='bx bx-user nav_icon'></i> 
            <span class="nav_name">Users</span> 
          </a> 
          <a href="#" class="nav_link"> 
            <i class='bx bx-message-square-detail nav_icon'></i> 
            <span class="nav_name">Messages</span> 
          </a> 
          <a href="#" class="nav_link"> 
            <i class='bx bx-bookmark nav_icon'></i> 
            <span class="nav_name">Bookmark</span> 
          </a> 
          <a href="#" class="nav_link"> 
            <i class='bx bx-folder nav_icon'></i> 
            <span class="nav_name">Files</span> 
          </a> 
          <a href="#" class="nav_link"> 
            <i class='bx bx-bar-chart-alt-2 nav_icon'></i> 
            <span class="nav_name">Stats</span> 
          </a> 
        </div> 
      </div> 
      <a href="#" class="nav_link"> 
        <i class='bx bx-log-out nav_icon'></i> 
        <span class="nav_name">SignOut</span> 
      </a> 
    </nav> 
  </div> 
  <!--Container Main start--> 
  <div class="height-100 bg-light"> 
    <h4>Main Components</h4> 
  </div> 
  <!--Container Main end--> 
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> 
  <script src="./js/navlayout.js"></script> 
</body>

CSS代码

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"); 
:root { 
  --header-height: 3rem; 
  --nav-width: 68px; 
  --first-color: #4723D9; 
  --first-color-light: #AFA5D9; 
  --white-color: #F7F6FB; 
  --body-font: 'Nunito', sans-serif; 
  --normal-font-size: 1rem; 
  --z-fixed: 100 
} 
*, ::before, ::after { box-sizing: border-box } 
body { 
  position: relative; 
  margin: var(--header-height) 0 0 0; 
  padding: 0 1rem; 
  font-family: var(--body-font); 
  font-size: var(--normal-font-size); 
  transition: .5s 
} 
a { text-decoration: none } 
.header { 
  width: 100%; 
  height: var(--header-height); 
  position: fixed; 
  top: 0; 
  left: 0; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 1rem; 
  background-color: var(--white-color); 
  z-index: var(--z-fixed); 
  transition: .5s 
} 
.header_toggle { 
  color: var(--first-color); 
  font-size: 1.5rem; 
  cursor: pointer 
} 
.header_img { 
  width: 35px; 
  height: 35px; 
  display: flex; 
  justify-content: center; 
  border-radius: 50%; 
  overflow: hidden 
} 
.header_img img { width: 40px } 
.l-navbar { 
  position: fixed; 
  top: 0; 
  left: -30%; 
  width: var(--nav-width); 
  height: 100vh; 
  background-color: var(--first-color); 
  padding: .5rem 1rem 0 0; 
  transition: .5s; 
  z-index: var(--z-fixed) 
} 
.nav { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  overflow: hidden 
} 
.nav_logo, .nav_link { 
  display: grid; 
  grid-template-columns: max-content max-content; 
  align-items: center; 
  column-gap: 1rem; 
  padding: .5rem 0 .5rem 1.5rem 
} 
.nav_logo { margin-bottom: 2rem } 
.nav_logo-icon { font-size: 1.25rem; color: var(--white-color) } 
.nav_logo-name { color: var(--white-color); font-weight: 700 } 
.nav_link { 
  position: relative; 
  color: var(--first-color-light); 
  margin-bottom: 1.5rem; 
  transition: .3s 
} 
.nav_link:hover { color: var(--white-color) } 
.nav_icon { font-size: 1.25rem } 
.show { left: 0 } 
.body-pd { padding-left: calc(var(--nav-width) + 1rem) } 
.active { color: var(--white-color) } 
.active::before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  width: 2px; 
  height: 32px; 
  background-color: var(--white-color) 
} 
.height-100 { height: 100vh } 
@media screen and (min-width: 768px) { 
  body { 
    margin: calc(var(--header-height) + 1rem) 0 0 0; 
    padding-left: calc(var(--nav-width) + 2rem) 
  } 
  .header { 
    height: calc(var(--header-height) + 1rem); 
    padding: 0 2rem 0 calc(var(--nav-width) + 2rem) 
  } 
  .header_img { width: 40px; height: 40px } 
  .header_img img { width: 45px } 
  .l-navbar { left: 0; padding: 1rem 1rem 0 0 } 
  .show { width: calc(var(--nav-width) + 156px) } 
  .body-pd { padding-left: calc(var(--nav-width) + 188px) } 
}

JavaScript代码

document.addEventListener("DOMContentLoaded", function(event) { 
  const showNavbar = (toggleId, navId, bodyId, headerId) => { 
    const toggle = document.getElementById(toggleId), 
          nav = document.getElementById(navId), 
          bodypd = document.getElementById(bodyId), 
          headerpd = document.getElementById(headerId) 
    // Validate that all variables exist 
    if (toggle && nav && bodypd && headerpd) { 
      toggle.addEventListener('click', () => { 
        // show navbar 
        nav.classList.toggle('show') 
        // change icon 
        toggle.classList.toggle('bx-x') 
        // add padding to body 
        bodypd.classList.toggle('body-pd') 
        // add padding to header 
        headerpd.classList.toggle('body-pd') 
      }) 
    } 
  } 
  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header') 
  /*===== LINK ACTIVE =====*/ 
  const linkColor = document.querySelectorAll('.nav_link') 
  function colorLink() { 
    if (linkColor) { 
      linkColor.forEach(l => l.classList.remove('active')) 
      this.classList.add('active') 
    } 
  } 
  linkColor.forEach(l => l.addEventListener('click', colorLink)) 
  // Your code to run since DOM is loaded and ready 
});

空白出现的原因

经过对代码的分析，这块空白主要由两个CSS设置问题导致：

侧边栏的右侧内边距：.l-navbar类设置了padding: .5rem 1rem 0 0;，其中右侧的1rem内边距让侧边栏本身占据的空间比视觉上的宽度更宽，直接导致主内容和侧边栏之间产生间隙。
响应式布局中的padding计算不匹配：在桌面端（屏幕宽度≥768px）的媒体查询里，展开后的侧边栏宽度是calc(var(--nav-width) + 156px)，但.body-pd类的padding-left却设置为calc(var(--nav-width) + 188px)，两者相差32px，这部分差值就形成了额外的空白。

此外，主内容容器没有针对性的布局适配，也让这个空白问题更加明显。

消除空白的修复方案

针对上述原因，我们可以通过以下几步调整CSS来解决问题：

1. 修正侧边栏的内边距

移除侧边栏的右侧内边距，将左侧内边距调整为合适的值，确保侧边栏和主内容紧密贴合：

.l-navbar {
  position: fixed;
  top: 0;
  left: -30%;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--first-color);
  padding: .5rem 0 0 1rem; /* 移除右侧padding，保留左侧内边距 */
  transition: .5s;
  z-index: var(--z-fixed)
}

2. 对齐响应式布局的padding计算

让.body-pd的padding-left和展开后的侧边栏宽度保持一致，避免计算偏差：

@media screen and (min-width: 768px) {
  /* 其他代码不变 */
  .show {
    width: calc(var(--nav-width) + 156px)
  }
  .body-pd {
    padding-left: calc(var(--nav-width) + 156px); /* 和侧边栏展开宽度匹配 */
  }
}

3. 调整导航项的内边距适配

由于修改了侧边栏的内边距，需要同步调整导航项的内边距，避免内容溢出或位置偏移：

.nav_logo, .nav_link {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  padding: .5rem 0 .5rem .5rem; /* 减少左侧padding，适配新的侧边栏内边距 */
}

4. 优化主内容容器的布局

给主内容容器添加基础的内边距，确保在侧边栏收起状态下内容也能正常显示：

.height-100 {
  height: 100vh;
  padding-left: 1rem; /* 适配侧边栏收起时的布局 */
}

完成这些调整后，侧边栏和主内容区域之间的空白就会被消除，布局会更加紧凑协调。

内容的提问来源于stack exchange，提问作者João A. Veiga