jquery - 卡片与 Angular mydatepicker 选择器重叠

Question

在此处输入图像描述 我将 Bootstrap、Jquery 与 Angular 9 集成在一起。我使用了 jquery 数据表、Angular Mydatepicker、Angular Select 和 Bootstrap Card。卡片与选择下拉列表和日期选择器选择器重叠。我使用了 Bootstrap 4 和 Angular 9。这是 css 还是 Angular 的问题？我没有向我的组件添加任何自定义 css 类。

<div class="row">

  <div class="col-sm-3 animated fadeInLeft">
    <div class="form-group">
      <b>Clear {{account.name}} - a/c Entries</b>
      <a href="javascript:void(0);" (click)="clearAccount()" class="btn btn-primary form-control">Clear {{account.name}}
        - a/c Entries</a>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInUpBig">
    <div class="form-group">
      <b>Day Book</b>
      <a href="javascript:void(0);" routerLink="/daybook/daybook" class="btn btn-primary form-control">Goto daybook</a>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInDownBig">
    <div class="form-group">
      <b>Select Account</b>
      <ng-select placeholder="Select a Account" [(ngModel)]="account.accountId" (change)="onAccountSelected($event)"
        [items]="accounts" bindLabel="name" bindValue="accountId">
      </ng-select>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInRight">
    <div class="form-group">
      <b>From Date - To Date</b>
      <div class="input-group">
        <input class="form-control" name="mydate" placeholder="Select a date" angular-mydatepicker
          #dp2="angular-mydatepicker" [(ngModel)]="fromToDateObject" [options]="dateOptions"
          (dateChanged)="onFromToDateChanged($event)" />

        <span class="input-group-btn">
          <button type="button" class="btn btn-primary" (click)="dp2.clearDate()">
            <i class="far fa-window-close"></i>
          </button>
          <button type="button" class="btn btn-primary" (click)="dp2.toggleCalendar()">
            <i class="fas fa-calendar"></i>
          </button>
        </span>

      </div>
    </div>
  </div>

</div>


<div class="row" [hidden]="tableHidden">
  <div class="col-sm-12">
    <div class="card  m-4 shadow-lg p-4 mb-4 bg-light animated bounce">
      <div class="card-body">
        <div class="table-responsive">
          <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" id="myTable">
            <thead>
              <tr>
                <th width="5%">sno</th>
                <th width="15%">Date</th>
                <th>Description</th>
                <th width="15%">Debit</th>
                <th width="15%">Credit</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let book of daybooks; let i = index">
                <td width="5%" id="{{i+1}}sno">{{i+1}}</td>
                <td width="15%">{{book.date | date :'dd-MMM-yyyy'}}</td>
                <td>{{book.description}}</td>
                <td width="15%" class="text-right">{{book.credit}}</td>
                <td width="15%" class="text-right">{{book.debit}}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th></th>
                <th></th>
                <th class="text-right">Total</th>
                <th class="text-right">{{this.debitTotal | currency:'INR'}}</th>
                <th class="text-right">{{this.creditTotal | currency:'INR'}}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>