Twitter Bootstrap 3.3.7 affix滚动时导航栏无法保持全屏宽度求助

我来帮你捋清楚这两个问题的根源，其实都是Bootstrap Affix插件触发后的固定定位特性搞的鬼，咱们一步步来解决：

当Affix插件触发时，目标元素会被自动设置为position: fixed，这时候它会脱离文档流：

• 宽度不再自动继承父容器的全屏尺寸，而是会被内部的.container固定宽度（比如大屏幕下的1170px）限制
• .take-test-heading的左右margin会直接压缩它的宽度，导致无法撑满视口

具体解决方案 #

1. 修复导航栏全屏宽度问题 #

给触发Affix后的导航栏添加强制全屏的样式，同时调整内部容器的宽度适配：

/* Affix触发后，强制导航栏占满整个视口 */
.navbar-lower.affix {
  width: 100%;
  left: 0;
  right: 0;
  margin: 0;
}

/* 让内部容器在Affix状态下也撑满宽度，同时保留合理内边距 */
.navbar-lower.affix .container-navbar {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

2. 修复蓝色标题栏占满视口问题 #

调整.take-test-heading的边距设置，用padding替代margin来保留内容的左右间距，避免压缩宽度：

.take-test-heading {
  background-color: rgb(51, 122, 183);
  height: 20px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin-top: 5px;
  /* 移除原来的左右margin，避免宽度被压缩 */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  /* 用padding替代margin，保留内容与边框的间距 */
  padding-left: 10px;
  padding-right: 20px;
}

额外优化提示 #

如果你只希望在Affix触发后才让标题栏占满视口，可以给样式加上.affix前缀：

.navbar-lower.affix .take-test-heading {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

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