css - Angular 样式不适用于表单

Question

我是 Angular 的新手。我写了下面的代码，我希望我的代码使用下面的样式格式，但我无法使用下面的代码实现，有人可以帮助我解决我的问题。

home.component.html

<div class="card">
  <form [formGroup]="userForm">
    <div class="mt-5 box">
      <div class="form-row">
        <div class="col-md-12">
          <div class="form-group mt-4">
            <label>Type</label>
          </div>
          <div class="form-row" style="margin-top:-10px">
            <div class="col">
              <input type="text" formControlName="type" class="form-control" placeholder="Type">
            </div>
          </div>
        </div>
        
        <div class="col-md-12">
          <div class="form-group mt-4">
            <label>Session</label>
          </div>
          <div class="form-row" style="margin-top:-10px">
            <div class="col">
              <input type="text" formControlName="session" class="form-control" placeholder="Session">
            </div>
          </div>
        </div>

        <div class="form-row mt-4">
          <div class="col-md-6">
            <button type="button" class="btn btn-primary" (click)="addItem()">Add</button>&nbsp
          </div>
          <div class="col-md-6">
            <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <div class="col-md-8 mt-4 mb-4">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of listData">
          <td><span>{{item.type}}</span></td>
          <td><span>{{item.session}}</span></td>
          <td><button type="button" class="btn btn-primary" (click)="removeItems(item)">Remove</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

home.component.css

.box{
width: 50%;
border: 1px solid rgb(145, 138, 138);
border-radius: 25px;
padding: 0px 20px 20px 20px;
margin-left: 400px;
}

我的结果

预期的

角.json

标签： cssangularforms