CSS中为col-md-12元素添加fixed定位后如何维持原有宽度？

当给元素设置position: fixed后，它会脱离文档流，不再以父元素作为包含块，转而以视口作为参考，因此会失去原本继承的父元素宽度约束，导致宽度变化。以下是几种可行的解决方法：

方法一：直接继承父元素宽度 #

如果父元素的宽度是稳定的，可以直接让fixed元素继承父元素的宽度，同时调整定位保持布局一致：

.col-md-12.fixed {
  position: fixed;
  width: inherit; /* 继承父元素宽度 */
  left: 0;
  right: 0;
  margin: 0 auto; /* 保持水平居中，和原布局对齐 */
  top: 0; /* 根据需求设置垂直位置 */
}

注意：如果父元素是响应式容器，这种方法在窗口尺寸变化时可能需要额外适配。

方法二：适配Bootstrap响应式布局 #

因为你用的是Bootstrap的col-md-12，它原本是在.container或.container-fluid容器内工作的。可以通过固定最大宽度+居中定位来匹配原布局的响应式特性：

.col-md-12.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%;
  max-width: 970px; /* 对应Bootstrap md断点下.container的宽度 */
  padding-left: 15px;
  padding-right: 15px; /* 保留栅格系统的内边距 */
}

/* 针对不同断点适配 */
@media (min-width: 1200px) {
  .col-md-12.fixed {
    max-width: 1170px;
  }
}

@media (max-width: 991px) {
  .col-md-12.fixed {
    max-width: 100%;
    left: 0;
    transform: none;
  }
}

方法三：动态获取父元素宽度（JS方案） #

如果父元素宽度是动态变化的，比如有内容撑开或窗口 resize 时变化，可以用JS实时获取并设置宽度：

const targetCol = document.querySelector('.col-md-12');
const parentContainer = targetCol.parentElement;

// 初始设置
targetCol.style.position = 'fixed';
targetCol.style.width = `${parentContainer.offsetWidth}px`;
targetCol.style.top = '0'; // 按需设置垂直位置

// 监听窗口 resize 事件更新宽度
window.addEventListener('resize', () => {
  targetCol.style.width = `${parentContainer.offsetWidth}px`;
});

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