使用Affix的Bootstrap浮动导航菜单滚动时出现尺寸变化问题

我看了你的问题，核心是滚动时导航菜单没法稳定占满所在网格列，尤其是窗口较大时尺寸跳变明显。这大概率是因为你给菜单设置了固定宽度值，没有利用CSS Grid的自适应特性。下面给你几个具体的修复方案：

1. 让菜单完全依赖Grid布局的宽度 #

首先，确保你的导航容器是Grid的直接子项，然后去掉手动设置的width，改用Grid的列定位和自动填充：

/* 假设你的网格容器是.grid-wrapper */
.grid-wrapper {
  display: grid;
  grid-template-columns: 250px 1fr; /* 左侧导航列 + 主内容列 */
  gap: 20px;
}

.nav-container {
  grid-column: 1 / 2; /* 固定在第一列 */
  width: 100%; /* 强制占满整个网格列的宽度 */
  box-sizing: border-box; /* 避免padding/border撑大宽度 */
}

这样不管窗口怎么变，菜单都会自动跟着网格第一列的宽度走，不会出现尺寸跳变。

2. 滚动固定时保持网格列宽度适配 #

如果滚动时你需要把菜单固定在顶部，别用固定像素的width，而是用CSS变量或者动态计算网格列的宽度：

首先，在网格容器里定义CSS变量：

.grid-wrapper {
  display: grid;
  grid-template-columns: var(--nav-column-width) 1fr;
  --nav-column-width: 250px;
  gap: 20px;
}

然后，滚动时给菜单添加固定定位，同时用变量设置宽度：

/* 假设滚动时给body添加.scrolled类 */
.scrolled .nav-container {
  position: fixed;
  top: 0;
  left: 0; /* 如果网格有padding，需要调整left值 */
  width: var(--nav-column-width);
  height: 100vh;
  transition: all 0.3s ease; /* 给过渡效果让变化更平滑 */
}

这样窗口 resize 时，只要你同步更新--nav-column-width的值（可以用JS监听resize事件），菜单宽度就会自动适配。

3. 修复折叠容器的内部布局 #

如果是折叠容器展开/收起时宽度跳变，要确保折叠容器的内部内容不会撑破宽度：

.collapsible-content {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0; /* 默认收起 */
}

.collapsible.open .collapsible-content {
  max-height: 500px; /* 根据内容调整 */
}

用max-height来做折叠过渡，而不是直接改变height，同时保持内部内容宽度100%，就不会出现宽度异常。

关键总结 #

• 避免给网格内的菜单设置固定像素宽度，尽量用100%或者CSS变量继承网格列的宽度
• 滚动固定时，用动态计算的宽度替代固定值，确保和网格列尺寸同步
• 给所有尺寸变化添加transition过渡，让效果更平滑不突兀

你可以把这些修改应用到你的代码里，应该就能解决滚动时宽度跳变的问题了。

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