如何在 bootstrap 网格中将 *ngFor 生成的内容居中？

Question

我想使用 Bootstrap 网格系统将一些内容居中放置在一行中。我看过很多关于此的示例，包括，但我的示例有所不同，因为使用了单独的 angular 组件来生成内容。

app.component.html:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
    <app-child-component></app-child-component>
  </div>
</div>

child-component.html:

<div *ngFor="let text of buttonText">
  <button mat-raised-button>{{text}}</button>
</div>

child-component.ts:

buttonText = ['Button1', 'Button2', 'Button3'];

结果如下：

但我希望所有按钮都水平对齐： StackBlitz 示例： https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src%2Fapp%2Fchild-component%2Fchild-component.component.ts

Answer 1

只需将 display: flex 添加到包装器容器即可：

最好添加 class 而不是内联样式。内联仅用于演示

<div style="display:flex">
  <div *ngFor="let text of buttonText">
    <button mat-raised-button>{{text}}</button>
  </div>
</div>

如何在 bootstrap 网格中将 *ngFor 生成的内容居中？

How to center content generated by *ngFor in a bootstrap grid?

css

angular

bootstrap-grid