html - 使用有角度的引导对齐组件

Question

我正在尝试生成一个在中间对齐的组件，如下所示：

<app-card titulo="Painel ao Vivo" [zeroPadding]="false" icon="fa-heartbeat fas">
  <div class="col-md-12 col-lg-12 col-sm-12">
    <div class="justify-content-center">
      <span class="text-sm text-black font-weight-bold mr-2">{{jogo.timeCasa.nome}}</span>
      <app-avatar [titulo]="jogo.timeCasa.nome" [img]="jogo.timeCasa.logo"
                  class="avatar rounded-circle bg-primary mr-2"></app-avatar>
      <button type="button" class="btn btn-primary btn-sm">0</button>
      <button type="button" class="btn btn-primary btn-sm">0</button>
      <app-avatar [titulo]="jogo.timeVisita.nome" [img]="jogo.timeVisita.logo"
                  class="avatar rounded-circle bg-primary mr-2"></app-avatar>
      <span class="text-sm text-black font-weight-bold">{{jogo.timeVisita.nome}}</span>
    </div>
  </div>
</app-card>

应用卡：

<div class="card">
  <div class="card-header border-0" >
    <h4 *ngIf="titulo" class="card-title"><i class="{{icon}}"></i> {{titulo}} </h4>
    <ng-container *ngIf="header" [ngTemplateOutlet]="header"></ng-container>
  </div>
  <div class="card-body border-radius-bottom" [ngClass]="{'p-0': zeroPadding}">
    <ng-content></ng-content>
  </div>
</div>

它应该是什么样子：https ://i.stack.imgur.com/NfuKw.png ，在网络上怎么样：https ://i.stack.imgur.com/cwKmq.png ，在手机上怎么样: https://i.stack.imgur.com/RR6GP.png

标签： htmlangularbootstrap-4angular-bootstrap