Bootstrap 5.2.3 Scrollspy侧边列表间距/内边距问题求助

问题背景 #

我正在为个人作品集制作新模板，借助左侧列表帮助浏览者快速定位各章节，目前使用Bootstrap 5.2.3的Scrollspy功能，整体效果正常，但侧边列表存在默认内边距，大屏下会浪费空间，且和右侧内容区距离过大，求解决方法。

解决方案 #

1. 移除导航容器的额外内边距 #

你代码里的侧边导航外层<nav id="navbar-example3"添加了pe-5类，这个类会给元素添加1.25rem的右侧内边距，是导致侧边与内容间距过大的核心原因，直接移除即可：

<!-- 修改前 -->
<nav id="navbar-example3" class="h-100 pe-5">

<!-- 修改后 -->
<nav id="navbar-example3" class="h-100">

2. 调整列间距（按需） #

Bootstrap的col列默认带有左右内边距（gutter），如果移除pe-5后仍觉得列间距过大，可以通过修改row的间距类来调整，比如使用gx-2（较小水平间距）或gx-0（完全取消间距）：

<!-- 修改前 -->
<div class="row">

<!-- 修改后（示例：缩小间距） -->
<div class="row gx-2">

3. 自定义导航项内边距（按需） #

如果想进一步压缩侧边导航项的内部空间，可以修改.nav-link的内边距样式，覆盖Bootstrap的默认值：

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
  padding: 0; /* 完全移除默认内边距，或设置为你需要的值，比如padding: 0.5rem 0; */
}

4. 修复激活状态的圆角样式问题 #

注意你当前的激活状态样式中，border-bottom-right-radius: 10缺少单位，导致圆角不生效，补充px单位即可：

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10px; /* 补充px单位 */
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

修改后完整代码示例 #

CSS部分 #

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
  padding: 0; /* 按需调整 */
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

HTML部分 #

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Testing Code 5</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

</head>

<body>

  <div class="pt-5" style="height:500px; background:grey;">
  </div>

  <div class="container-12">
    <div class="row gx-2"> <!-- 调整列间距 -->

      <div class="col-3">
        <nav id="navbar-example3" class="h-100"> <!-- 移除pe-5 -->
          <nav class="nav nav-pills flex-column sticky-top">
            <a class="nav-link" href="#item-1">Problem</a>
            <a class="nav-link" href="#item-2">Team & Role</a>
            <a class="nav-link" href="#item-3">Research</a>
            <a class="nav-link" href="#item-4">Iterations</a>
            <a class="nav-link" href="#item-5">Results</a>
          </nav>
        </nav>
      </div>

      <div class="col-8 mt-4">
        <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">

          <div id="item-1">
            <h5>Item 1</h5>
            <p>....</p>
          </div>

          <div id="item-2">
            <h4>Item 2</h4>
            <p>....</p>
          </div>


          <div id="item-3">
            <h4>Item 3</h4>
            <p>....</p>
          </div>
          <div id="item-4">
            <h4>Item 4</h4>
            <p>....</p>
          </div>
          <div id="item-5">
            <h4>Item 5</h4>
            <p>....</p>
          </div>

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

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

</html>

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