[Angular2] Label Text Padding

Problem
This is my original modal dialog:


I hope the label can be looks like (it will be looks more pretty):



Here has the original code snippet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<modal #newUserModal [size]="'lg'"> <modal-header [show-close]="true"> <h4 class="modal-title">新增用戶</h4> </modal-header> <modal-body> <div class="row"> <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="newUserModal.close();"> 取消 </button> <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="createUser()"> 儲存 </button> </div> <div class="row"> <div class="col-sm-10 form-inline"> <label>帳戶名稱</label> <input type="text" class="form-control" id="login" [(ngModel)]="newUser.login" required> </div> </div> <div class="row"> <div class="col-sm-10 form-inline"> <label>名字</label> <input type="text" class="form-control" id="lastName" [(ngModel)]="newUser.lastName" required> </div> </div> <!-- ignore some code --> </modal-body> </modal>

How-To
We can add padding-left for each label, the padding-left property sets the left padding (space) of an element.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<modal #newUserModal [size]="'lg'"> <modal-header [show-close]="true"> <h4 class="modal-title">新增用戶</h4> </modal-header> <modal-body> <div class="row"> <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="newUserModal.close();"> 取消 </button> <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="createUser()"> 儲存 </button> </div> <div class="row"> <div class="col-sm-10 form-inline"> <label style="padding-left:64px">帳戶名稱</label> <input type="text" class="form-control" id="login" [(ngModel)]="newUser.login" required> </div> </div> <div class="row"> <div class="col-sm-10 form-inline"> <label style="padding-left:96px">名字</label> <input type="text" class="form-control" id="lastName" [(ngModel)]="newUser.lastName" required> </div> </div> <!-- ignore some code --> </modal-body> </modal>

Reference
[1] http://www.w3schools.com/cssref/pr_padding-left.asp