如何使页脚覆盖屏幕的整个宽度？答案

【问题标题】：How do I make the footer cover the whole width of the screen?如何使页脚覆盖屏幕的整个宽度？
【发布时间】：2020-08-28 11:22:00
【问题描述】：

我希望页脚覆盖整个屏幕宽度。这就是现在的样子：
Footer

我将不胜感激！

  <!-- Footer -->
  <div class="container">
    <footer class="py-5 bg-dark" id="footer">
      <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
    </footer>
  </div>

【问题讨论】：

将其从container 中取出或从容器中删除边距。

标签： html css twitter-bootstrap web bootstrap-4

【解决方案1】：

你可以把那个容器div标签放在footer里面

这样页脚的所有内容都将在容器中，而页脚将具有 100% 的宽度

<footer class="py-5 bg-dark" id="footer">
  <div class="container">
    <p class="m-0 text-center text-white">&copy; X <script>
      document.write(new Date().getFullYear());
    </script>. This website was made with Bootstrap.</p>
  </div>
</footer>

【讨论】：

【解决方案2】：

只要从.container取出来

<!-- Footer -->    
<footer class="py-5 bg-dark" id="footer">
  <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
</footer>

或者如果您需要在footer 中使用.container

<footer class="py-5 bg-dark" id="footer">
  <div class="container">
    <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
  </div>
</footer>

【讨论】：