Выровняйте компоненты, используя угол bootstrap - PullRequest
Новая
       53

Выровняйте компоненты, используя угол bootstrap

0 голосов
/ 16 июня 2020

Я пытаюсь создать компонент, выровненный по центру, следующим образом: 

<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>

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

...