如何使用Bootstrap 5实现网页body内容全屏显示

我正在使用Bootstrap 5开发网站，遇到的问题是：网页在浏览器中无法实现全屏显示。尝试了以下CSS代码后问题仍未解决：

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 0 auto;
    height: 100vh;
    width: 100%;
}

浏览器显示效果截图：

解决思路和步骤：

• 同时设置html和body的基础样式，浏览器默认会给这两个元素添加margin或padding，单独设置body可能无效：

  html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden; /* 避免出现横向滚动条 */
  }
  

• 检查是否使用了Bootstrap的.container类，这个类默认带有max-width限制和左右内边距，要全屏的话可以替换成.container-fluid，或者自定义样式覆盖：

  .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  

• 排查页面中的其他父级元素，确认没有设置固定宽度、margin或overflow属性限制了页面的全屏展示。

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