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

Question

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

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

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样式。

- Arthium

---

确保你已将保留空格设置为true。 - user184994

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

不，实际上这是您可以在@Component装饰器中设置的一个属性。 - user184994

请查看此答案。 - ConnorsFan

我们找到了上述问题的解决方案，尽管不完全是我们想要的。在styles.css中，我们添加了.btn { margin: 2px}。这使我们恢复了更新前看到的原始间距大小。我不知道你可以引用相同的Bootstrap类名并覆盖它们。</br>然而，我不太喜欢在styles.css中这样做。 - Arthium

Answer 1

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

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

在这个地方找到了它

- daxtersky

---

你的更改在我的项目中起作用了。我在过去的两天一直在寻找这个修复。谢谢... - Srujal Patel

Answer 2

ConnorsFan的答案链接是我们问题的答案。

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

- Arthium

Answer 3

补充标记答案，此问题由“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 的文档中，您可以为该组件提供一个选项，仅针对该组件打开/关闭此功能。

另一种解决方案是根据评论建议，全局添加 marginto 所有 .btn 类，但这将导致反向效果发生，如果选项再次切换（在按钮之间给出太多的间距而不是自然空间）

最后说明，这是 HTML/DOM 的副作用，而不是 Angular 或 CSS，您可以通过删除/添加每个元素之间的换行符/空格来复制此效果。

- Jessy

Answer 4

将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>

- Hibisceae