2輸入並排及其錯誤信息在它之下對齊

Question

我已經創建了我的問題筆：

http://codepen.io/helloworld/pen/QpRxNr?editors=1100

我顯示2個輸入與在表列中的每個的錯誤消息。

設計太長我的口味是在一個表列內。

我希望2個輸入是並排的，每個錯誤消息直接對齊左側和其輸入對應。

就像在樣機我沒有當這兩個領域都沒有輸入值：

我怎麼能這樣做？

該解決方案應該考慮到兩個輸入必須佔據整個表格列的寬度。我不需要引導容器 - >行 - > 2列解決方案，因爲表格列左側不應有空白/填充。

我喜歡Flexbox的解決方案，也可以使用引導柔性公用事業:-)

<table> 
<td [formGroup]="customerForm" style="display:flex"> 

     <input class="form-control" placeholder="First name" type="text" formControlName="firstName" /> 
     <div *ngIf="customerForm.controls.firstName.touched"> 
      <div class="form-error" *ngIf="customerForm.controls.firstName.hasError('required')"> 
       first name is required. 
      </div> 
     </div> 

     <input class="form-control" placeholder="Last name" type="text" formControlName="lastName" /> 
     <div *ngIf="customerForm.controls.lastName.touched"> 
      <div class="form-error" *ngIf="customerForm.controls.lastName.hasError('required')"> 
       last name is required. 
      </div> 
     </div> 
    </td> 
</table> 

Answer 1

這可以單獨與引導4 Flexbox的utils的完成，因此你不需要自定義CSS。

選項1：把2個輸入/差錯在自己的div，設置d-flex在td ...

 <td class="d-flex"> 
      <div class="mr-3"> 
       <input class="form-control" placeholder="First name" type="text" formcontrolname="firstName"> 
       <div *ngif="customerForm.controls.firstName.touched"> 
        <div class="form-error" *ngif="customerForm.controls.firstName.hasError('required')"> 
         first name is required. 
        </div> 
       </div> 
      </div> 
      <div> 
       <input class="form-control" placeholder="Last name" type="text" formcontrolname="lastName"> 
       <div *ngif="customerForm.controls.lastName.touched"> 
        <div class="form-error" *ngif="customerForm.controls.lastName.hasError('required')"> 
         last name is required. 
        </div> 
       </div> 
      </div> 
     </td> 

選項2：離開HTML結構原樣，並使用utils的寬度和Flexbox的秩序......

 <td class="d-flex flex-wrap"> 
      <input class="form-control w-50 flex-first" placeholder="First name" type="text" formcontrolname="firstName"> 
      <div *ngif="customerForm.controls.firstName.touched" class="w-50"> 
       <div class="form-error" *ngif="customerForm.controls.firstName.hasError('required')"> 
        first name is required. 
       </div> 
      </div> 
      <input class="form-control w-50 flex-first" placeholder="Last name" type="text" formcontrolname="lastName"> 
      <div *ngif="customerForm.controls.lastName.touched" class="w-50 flex-last"> 
       <div class="form-error" *ngif="customerForm.controls.lastName.hasError('required')"> 
        last name is required. 
       </div> 
      </div> 
     </td> 

Here is the demo