Bootstrap affix致侧边栏宽度异常，如何恢复25%宽度并保持粘性？

为啥加了.affix后侧边栏变宽了？ #

其实这是固定定位的特性搞的鬼！Bootstrap的.affix类会把元素的定位从原来的相对/静态定位改成固定定位（fixed）。固定定位的元素会“跳”出正常的文档流，不再受父级.row和.col-md-3的网格约束——原来的.col-md-3是靠着.container和.row的宽度算出25%的占比，但固定定位后，元素会盯着视口（或者最近的有定位的父元素）算宽度，完全不理原来的网格规则，所以就会超出你预期的宽度啦。

怎么让它既固定又保持25%宽度？ #

给你两个实用的解决办法，选哪个看你布局需求：

办法1：嵌套容器，把布局和固定定位分开 #

别直接给.col-md-3加.affix，在列里面套个div，把.affix加在这个内层div上。这样外层的.col-md-3还老老实实保持25%的网格宽度，内层的固定元素直接继承外层的宽度，完美解决：

<div class="container">
  <div class="row">
    <!-- 侧边栏列（保持网格布局） -->
    <div class="col-md-3">
      <div class="sidebar-menu affix" data-offset-top="100">
        <!-- 你的菜单内容放这里 -->
      </div>
    </div>
    <!-- 主体内容区域 -->
    <div class="col-md-9">
      <!-- 正文内容 -->
    </div>
  </div>
</div>

再补点CSS，让内层固定元素占满外层列的宽度：

.sidebar-menu.affix {
  width: 100%;
  top: 20px; /* 这里可以调整侧边栏固定后离顶部的距离 */
}

办法2：直接给affix元素加固定宽度比例 #

如果你一定要直接给.col-md-3加.affix，那就在CSS里强制给它设25%宽度，再配合媒体查询适配小屏幕：

/* 强制固定宽度为25% */
.affix {
  width: 25%;
}

/* 小屏幕下取消固定定位，避免宽度乱掉 */
@media (max-width: 991px) {
  .affix {
    position: static !important;
    width: auto !important;
  }
}

小提醒：如果要更精准，可以把宽度改成calc(25% - 30px)——因为Bootstrap的.col-*默认左右各有15px的内边距，减去这个数值才是和原来列的内容宽度完全一致的。

最后说句题外话 #

用Bootstrap affix的时候，记得设置data-offset-top或者data-offset-bottom属性哦，这个是用来告诉浏览器什么时候触发固定/取消固定的滚动位置，不然可能会出现滚动时固定状态乱跳的情况～

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