Question

在以下网站上：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

有人可以帮忙吗？

Answer 1

与您提供的演示相反，此行为的原因是您正在迭代按钮。如果你在没有循环的情况下添加它们，它们就会像你希望的那样渲染。我建议你实际上使用CSS来达到这个目的。只需在CSS中的按钮之间添加一个边距：

.btn{
    margin: 5px;
}

您更新的Plunker

Answer 2

它们的显示属性设置为内联块，默认情况下增加4px空间.....这就是为什么人们不使用display：inline-block来创建灵活的网格

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

2 个答案: