Angular 6升级后Bootstrap控件间距消失问题求助

没错，Angular 6 确实会默认压缩组件模板的 HTML 内容——这是 Angular CLI 升级到 6.x 版本后引入的性能优化之一，目的是减小打包后的文件体积、提升应用加载速度。压缩过程会移除模板中所有多余的空白字符（空格、换行、制表符等），而你遇到的问题正好是因为 Bootstrap 的部分 inline/inline-block 控件（比如按钮、输入组元素）的间距依赖于 HTML 中的空白字符，一旦这些空白被移除，控件就会紧贴在一起。

下面给你几个可行的解决办法，按推荐程度排序：

1. 使用 Bootstrap 内置的间距类（最推荐） #

Bootstrap 提供了一套完整的 spacing 工具类，专门用来控制元素的 margin 和 padding，完全不需要依赖 HTML 空白。比如要给按钮之间添加右侧间距，直接用 mr-2（对应 margin-right: 0.5rem）这类类即可：

<button class="btn btn-primary mr-2">提交</button>
<button class="btn btn-secondary">取消</button>

这种方法最可靠，也符合 Bootstrap 的设计规范，不管模板是否被压缩，样式都能稳定生效。常用的间距类规则：

• m-{方向}-{大小}：控制 margin，方向可选 t(上)、r(右)、b(下)、l(左)、x(左右)、y(上下)，大小从 0 到 5（对应不同的 rem 尺寸）
• p-{方向}-{大小}：控制 padding，规则同上

2. 关闭特定组件或全局的 HTML 空白压缩 #

如果你更倾向于保留模板中的空白格式，可以通过配置关闭压缩：

单个组件关闭 #

在组件的 @Component 元数据中添加 preserveWhitespaces: true：

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  preserveWhitespaces: true
})
export class MyComponentComponent { }

全局关闭 #

在 angular.json 文件的构建配置中，找到 projects -> [你的项目名] -> architect -> build -> options，添加 preserveWhitespaces: true：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "preserveWhitespaces": true,
            // 其他配置项...
          }
        }
      }
    }
  }
}

不过要注意，全局关闭会让所有模板都保留空白，可能会稍微增加打包后的文件体积。

3. 手动添加不可中断空白字符（临时方案） #

如果只是临时解决个别场景，可以在控件之间添加   或者用 <ng-container> 包裹空白：

<button class="btn btn-primary">&nbsp;</button><button class="btn btn-secondary">取消</button>
<!-- 更优雅的写法 -->
<button class="btn btn-primary"><ng-container>&nbsp;</ng-container></button><button class="btn btn-secondary">取消</button>

这种方法比较繁琐，不推荐大面积使用，只适合临时调试或特殊场景。

总结一下，最推荐的还是用 Bootstrap 的 spacing 类，既能保证样式稳定，又符合前端最佳实践。如果必须保留模板的空白格式，再考虑调整 Angular 的压缩配置。

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