Bootstrap元素定位：AdminLTE+Angular12项目如何消除页面空白实现满宽

解决方案 #

• 第一步：修改页面body标签的类属性，添加AdminLTE原生流体布局类layout-fluid，修改后的代码如下：

<body class="hold-transition sidebar-mini layout-fixed layout-fluid">

这个类是AdminLTE3专门提供的全屏宽度布局开关，开启后会取消内容区默认的最大宽度限制。

• 第二步：移除测试用冗余脚本，打开你的angular.json文件，在build配置的scripts数组里删掉node_modules/admin-lte/dist/js/demo.js这一行，这个是官方演示站点用的脚本，会额外注入布局样式干扰实际开发效果。
• 第三步：如果仍有残留边距，在项目全局样式文件src/styles.css中添加如下自定义样式覆盖默认边距：

/* 取消内容容器默认左右内边距 */
.content-header .container-fluid,
.content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
/* 如有需要可同时取消内容包裹层的内边距 */
.content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

修改完成后重新执行ng serve启动项目即可看到内容区完全占满可用宽度，无多余留白。

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