如何让Bootstrap页面的Footer实现100%宽度？

你的Footer没法实现100%宽度，核心问题是它被嵌套在container类的div内部。Bootstrap的container类自带左右内边距，且在不同屏幕尺寸下有固定的最大宽度限制，直接把Footer放在里面自然无法撑满整个页面宽度。

把Footer从container容器中移出，让它作为页面的顶级元素之一，就能实现100%宽度。如果需要给Footer加背景、边框等样式，直接将相关类加到Footer标签上即可。

修正后的基础代码示例 #

<!-- 页面主体内容保留在container内 -->
<div class="container bg-warning border border-5 border-dark mt-3">
  这里放置页面主体内容
</div>

<footer class="py-2 my-2">
  <ul class="nav justify-content-center border-bottom pb-3 mb-3 border-dark">
    <li class="nav-item"><a href="#" class="nav-link px-2 text-dark fw-bold">Homepage</a></li>
    <li class="nav-item"><a href="#" class="nav-link px-2 text-dark fw-bold">Contact us here</a></li>
  </ul>
  <p class="text-center text-dark fw-bold">&copy; copyright filler</p>
</footer>

若需Footer内容和主体同宽（带内边距） #

如果希望Footer的内容和页面主体一样有固定宽度的内边距，可以在Footer内部嵌套container类的div来控制内容宽度：

<footer class="py-2 my-2 bg-warning">
  <div class="container">
    <ul class="nav justify-content-center border-bottom pb-3 mb-3 border-dark">
      <li class="nav-item"><a href="#" class="nav-link px-2 text-dark fw-bold">Homepage</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 text-dark fw-bold">Contact us here</a></li>
    </ul>
    <p class="text-center text-dark fw-bold">&copy; copyright filler</p>
  </div>
</footer>

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