Angular 2：引导按钮之间没有间距答案

【问题标题】：Angular 2: No spacing between bootstrap buttonsAngular 2：引导按钮之间没有间距
【发布时间】：2022-01-02 20:07:55
【问题描述】：

在以下网站上：http://getbootstrap.com/css/#buttons

boostrap 网站上的演示按钮之间有一个空格，但是当我在我的网站上使用它们时，它们之间没有空格。我使用开发者工具检查了样式，但不知道是什么导致了这个空间。

代码如下：

app.ts

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
     <button type="button" class="btn btn-primary" *ngFor="let room of rooms">{{room.Name}}</button>
   </div>
  `,
})
export class App {
  name:string;
  rooms:Array<any> = [
      {Name: 'Room 1'},
      {Name: 'Room 2'},
      {Name: 'Room 3'},
      {Name: 'Room 4'},
    ]
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

index.html

    <!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

这是一个显示我的代码的 plunker：https://plnkr.co/edit/68Au4swU0Oi63PQFOn5L?p=preview

谁能帮忙？

【问题讨论】：

我们需要您的代码进行比较。也许分享指向您网站的链接或所有相关代码 sn-ps。
向我们展示带有您的代码的代码 sn-p
这个带有 inline block 元素的jsfiddle 也有间距：

标签： css twitter-bootstrap angular

【解决方案1】：

与您提供的演示相反，此行为的原因是您正在迭代按钮。如果您在没有循环的情况下添加它们，它们会按照您的意愿呈现。我建议您实际上为此目的使用 CSS。只需在 CSS 中的按钮之间添加边距：

.btn{
    margin: 5px;
}

您更新的Plunker

【讨论】：

这不是一个正确的答案。

【解决方案2】：

他们的 display 属性设置为 inline-block ，默认添加 4px 空间.....这就是人们不使用 display: inline-block 来创建灵活网格的原因

【讨论】：

请查看显示代码和 plunker 的更新问题。 inline-block 是按钮上的样式，但不会创建空格

【解决方案3】：

为了解决这个问题，您需要添加 preserveWhitespaces: true tsConfig ：

"angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "preserveWhitespaces": true  // add this line in tsconfig.json
  }

【讨论】：