如何让Bootstrap 5.1容器在Blazor Server App中占满全屏无外边距？

问题根源 #

默认的.container自带左右内边距，且宽度不会铺满全屏；另外浏览器默认给body设置了外边距，这两个因素共同导致了四周出现空隙。

具体解决方法 #

1. 调整容器类与边距样式 #

直接把.container替换为.container-fluid，再搭配Bootstrap自带的边距控制类，就能实现全屏无空隙的效果：

<div class="container-fluid bg-primary p-0 m-0 vh-100">
  Hello World!
</div>

各类作用说明：

• .container-fluid：让容器宽度适配整个浏览器视口
• .p-0：移除容器的所有内边距
• .m-0：移除容器的所有外边距
• .vh-100：让容器高度占满整个视口高度（如果不需要高度全屏可以去掉这个类）

2. 清除body默认外边距 #

如果页面顶部或底部仍有细微空隙，需要在Blazor项目的wwwroot/css/site.css中添加全局样式：

body {
  margin: 0;
  padding: 0;
}

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