角2：引导按钮

-1

在以下站点之间没有间隔：http://getbootstrap.com/css/#buttons 角2：引导按钮

上有自举现场演示按钮之间的空间，但是当我用他们在我的网站，有之间没有空格。我使用开发人员工具来检查样式，但无法弄清楚造成这种空间的原因。

下面的代码：

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/[email protected]/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/[email protected]/Reflect.js"></script> 
    <script src="https://unpkg.com/[email protected]/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

谁能帮助？

来源

2017-01-13 Kesty

我们需要你的代码进行比较。也许分享链接到您的网站或所有相关的代码片段。 – ThisClark

向我们显示与您的代码 – Weedoze

此[jsfiddle]（https://jsfiddle.net/mgoo8wa7/）与**行内块**元素的代码片段也有间距： – Hodrobond

这样做的原因行为相反你提供的演示，是你迭代按钮。如果你在没有循环的情况下添加它们，它们就像你希望的那样渲染。我建议你为此使用CSS。就在CSS中添加按钮之间的边距：

.btn{ 
    margin: 5px; 
}

你更新Plunker

来源

2017-01-13 10:28:14 Alex

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

来源

2017-01-13 08:43:59

请查看更新后的问题，其中显示代码和笨蛋。内联块是按钮上的样式，但它不会创建空间 – Kesty

角2：引导按钮

回答

相关问题