부트 스트랩 열 CSS

Question

내가 제대로 모든 열을 정렬하려면 어떻게 내 Angular2 양식

<form [formGroup]="myForm" autocomplete="off" novalidate>   <div 
class="row"> <div class="form-group col-md-4" [ngClass]="{ 'error' : 
myForm.controls.firstname.invalid &&   
myForm.controls.firstname.touched}"> 
<label for="firstname">Please tell us your name</label> 
<control-messages [control]="myForm.controls.firstname"></control-messages> 
<input name="firstname" formControlName="firstname" type="text" 
class="form-control" placeholder="First Name *" />  </div> <div 
class="form-group col-md-4" > 
<label for="middlename">&nbsp; </label> 
<control-messages [control]="myForm.controls.middlename"></control-messages> 
<input name="middlename" id="middlename" type="text" class="form-control" 
placeholder="Middle Name"  formControlName="middlename"/> </div>  
<div class="form-group col-md-4" [ngClass]="{ 'error' : 
myForm.controls.lastname.invalid &&  myForm.controls.lastname.touched  
}"> 
<label for="lastname"> &nbsp;</label> 
<control-messages [control]="myForm.controls.lastname"></control-messages> 
<input name="lastname" formControlName="lastname" type="text" class="form- 
control" placeholder="Last Name *"/> </div> </div> 
</form> 

enter image description here

입니까? 도와주세요.

<form [formGroup]="myForm" autocomplete="off" novalidate> 
    <div class="row"> 
     <div class="form-group col-md-4" [ngClass]="{ 'error' : 
     myForm.controls.firstname.invalid && 
     myForm.controls.firstname.touched}"> 
     <label for="firstname">Please tell us your name</label> 
     <control-messages [control]="myForm.controls.firstname"></control-messages> 
     <input name="firstname" formControlName="firstname" type="text" 
      class="form-control" placeholder="First Name *" /> 
     </div> 
     <div class="form-group col-md-4" > 
     <label for="middlename">&nbsp; </label> 
     <control-messages [control]="myForm.controls.middlename"></control-messages> 
     <input name="middlename" id="middlename" type="text" class="form-control" 
      placeholder="Middle Name"  formControlName="middlename"/> 
     </div> 
     <div class="form-group col-md-4" [ngClass]="{ 'error' : 
     myForm.controls.lastname.invalid && myForm.controls.lastname.touched 
     }"> 
     <label for="lastname"> &nbsp;</label> 
     <control-messages [control]="myForm.controls.lastname"></control-messages> 
     <input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *"/> 
     </div> 
    </div> 
</form> 

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form [formGroup]="myForm" autocomplete="off" novalidate> 
 
    <div class="row"> 
 
    <div class="form-group col-md-4" [ngClass]="{ 'error' : 
 
     myForm.controls.firstname.invalid && 
 
     myForm.controls.firstname.touched}"> 
 
     <label for="firstname">Please tell us your name</label> 
 
     <control-messages [control]="myForm.controls.firstname"></control-messages> 
 
     <input name="firstname" formControlName="firstname" type="text" class="form-control" placeholder="First Name *" /> 
 
    </div> 
 
    <div class="form-group col-md-4"> 
 
     <label for="middlename">&nbsp; </label> 
 
     <control-messages [control]="myForm.controls.middlename"></control-messages> 
 
     <input name="middlename" id="middlename" type="text" class="form-control" placeholder="Middle Name" formControlName="middlename" /> 
 
    </div> 
 
    <div class="form-group col-md-4" [ngClass]="{ 'error' : 
 
     myForm.controls.lastname.invalid && myForm.controls.lastname.touched 
 
     }"> 
 
     <label for="lastname"> &nbsp;</label> 
 
     <control-messages [control]="myForm.controls.lastname"></control-messages> 
 
     <input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *" /> 
 
    </div> 
 
    </div> 
 
</form>

당신은 어떤 라인이 같은 시도, 마지막 이름 입력 필드에 form-control 사이에 중단했다. 그러나 도움이되지 않았습니다.