从 Angular 5 升级到 Angular 6，Bootstrap 按钮样式没有间距

Posted 2023-03-06

【中文标题】从 Angular 5 升级到 Angular 6，Bootstrap 按钮样式没有间距

【英文标题】：Upgraded from Angular 5 to Angular 6, Bootstrap button styles have no spacing

【发布时间】：2018-11-01 18:27:43

【问题描述】：

最近，我们从 Angular 5 升级到了 Angular 6。

问题： Bootstrap 按钮样式之间现在没有边距。

引导版本：3.3.7

例如，如果在 html 中你做这样的事情。

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

在我们更新之前，这些按钮之间会有边距。

只是好奇我们是否可以更新一些可以修复此问题的内容或可以使用的全局 CSS 样式。

【问题讨论】：

确保您已将保留空白设置为 true

我们应该将它添加到我们的应用程序级别的styles.css中吗？或者这是 bootstrap.css 中需要查看的内容？

不，它实际上是您可以在@Component 装饰器中设置的属性

见this answer。

我们找到了解决上述问题的方法，尽管这不是我们想要的。在styles.css 中我们添加了.btn margin: 2px 这给了我们在更新之前看到的原始间距大小。我不知道您可以引用相同的引导类名称并覆盖它们。 然而，我并不喜欢在 styles.css 中这样做。

【参考方案1】：

ConnorsFan 的 answer link 是我们问题的答案。

Angular 6 默认将应用程序的 angularCompilerOption:preserveWhitespaces 设置为 false。

【参考方案2】：

在我的项目中，通过在 main.ts 文件中将 preserveWhitespaces 设置为 true，我能够恢复 Bootstrap 按钮之间的默认空格：

platformBrowserDynamic()
  .bootstrapModule(AppModule,  preserveWhitespaces: true)
  .catch(err => console.log(err));

在this place找到它

【讨论】：

您的更改适用于我的项目。因为我在过去 2 天内一直在寻找此修复程序。谢谢...

【参考方案3】：

将 btn-toolbar 类添加到 div 以获得按钮之间的空间边距。像这样：

 <div class="btn-toolbar">
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-cancel">Cancel</button>
</div>

【参考方案4】：

要添加到标记的答案，此问题是由 preserveWhitespaces 设置引起的。

幕后真正发生的是您的模板代码，例如

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

正在删除所有空格。这也删除了每个按钮元素末尾的换行符。是换行符提供了额外的空间，而不是每个按钮之间的边距。

所以这更清楚地显示了为什么按钮粘在一起。

<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>

您可以将修复作为建议全局应用，也可以根据需要解决特定组件上的问题。 https://angular.io/api/core/Component您会注意到，在@components 的文档中，您可以提供一个选项来仅为该组件打开/关闭此功能。

cmets 中建议的另一种解决方案是为所有 .btn 类全局添加边距，但这会产生相反的副作用，即选项再次切换（在按钮之间留出很大的边距而不是自然空间）

最后请注意，这是一个 HTML/DOM 副作用，而不是 Angular 或 CSS，您可以通过删除/添加每个元素之间的换行符/空格来使用几乎任何内联元素复制此效果。