Issue
On the following site: http://getbootstrap.com/css/#buttons
There is a space between the demo buttons on the boostrap site, but when I used them on my site, there's no space between. I've used developer tools to examine the styles but can't figure out what's causing that space.
Here's the code:
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>
Here is a plunker showing my code: https://plnkr.co/edit/68Au4swU0Oi63PQFOn5L?p=preview
Can anyone help?
Solution
The reason for this behavior in contrary of the demo you provided, is that you are iterating the buttons. If you add them without the loop, they render just like as you would wish. I would suggest you actually use CSS for this purpose. Just add a margin between the buttons in CSS:
.btn{
margin: 5px;
}
Your updated Plunker
Answered By - AT82
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.