Bootstrap 5 页脚（Footer）无法全屏显示问题求助

问题原因 #

你的footer被嵌套在container-fluid容器内，而Bootstrap的container-fluid默认带有左右内边距（padding-left和padding-right），所以即便给footer设置width:100%，也会被父容器的内边距限制，无法真正占满全屏宽度。

解决方案 #

方案一：将footer移出容器（推荐） #

把footer从container-fluid中独立出来，让它直接作为body的子元素，就能自然占满全屏宽度：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 页面主体内容容器 -->
<div class="container-fluid">
  <!-- 这里放置页面其他内容 -->
</div>

<!-- 独立的全屏页脚 -->
<footer class="py-4 bg-dark">
  <ul class="nav justify-content-center border-bottom pb-3 mb-3">
    <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
    <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
    <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
    <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
  </ul>
  <p class="text-center text-muted">&copy; 2022 Company, Inc</p>
</footer>

方案二：清除容器内边距（特殊场景用） #

如果必须将footer留在container-fluid内，可以给容器添加Bootstrap的px-0类清除左右内边距：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container-fluid px-0">

  <footer class="py-4 bg-dark">
    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
    </ul>
    <p class="text-center text-muted">&copy; 2022 Company, Inc</p>
  </footer>

</div>

说明 #

方案一更贴合Bootstrap的布局逻辑，container-fluid的作用是包裹页面主体内容，页脚这类全屏组件独立于容器存在，能避免不必要的样式冲突。

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