为什么我的Bootstrap页脚宽度比container容器更宽？

你给页脚设置了position: fixed属性，该属性会让元素脱离正常文档流，默认相对于浏览器视口定位，你配置的width: 100%是相对于整个屏幕的宽度，而非继承父级.container的宽度，因此会出现右侧超出容器的问题。

这里提供两种常用的可直接落地的修改方案：

方案1：仅修改CSS样式（无HTML结构改动） #

调整你的.mytest类样式，新增适配父容器的定位规则即可：

.mytest{
    width: 100%;
    background-color: aqua;
    height:50px;
    position:fixed;
    bottom:0;
    /* 新增以下规则 */
    max-width: inherit;
    left: 50%;
    transform: translateX(-50%);
}

该方案通过max-width: inherit继承父级.container的最大宽度，再用水平偏移让页脚始终居中对齐容器，自动适配Bootstrap所有响应式断点。

方案2：调整HTML结构（使用Bootstrap原生类） #

把页脚单独放在独立的.container容器中，使用Bootstrap自带的fixed-bottom类处理定位：

<body>
      <!-- 原有内容容器 -->
      <div class="container">
        <div  class="row" >
            <div  class="col-md-6 myleft">
                this is the left side (col-md-6)
            </div>
            <div  class="col-md-6 myright" >
                this is the right side (col-md-6)             
            </div>
        </div>
      </div>   
      <!-- 单独的页脚容器 -->
      <div class="container fixed-bottom p-0">
        <div  class="row" >
          <div  class="col-md-12 mytest">
            this is my footer
          </div>  
        </div>
      </div>
</body>

之后删除.mytest类中的position:fixed;bottom:0;两行规则即可。

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