时间戳

首页 > 解决方案 > 如何在引导网格中将 *ngFor 生成的内容居中？

css - 如何在引导网格中将 *ngFor 生成的内容居中？

问题描述

我想使用 Bootstrap 网格系统将一些内容集中在一行中。我已经查看了许多关于此的示例，包括this，但我的示例有所不同，因为使用了单独的角度组件来生成内容。

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>

子组件.html：

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

子组件.ts：

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

这给出了结果： 在此处输入图像描述

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

标签： cssangularbootstrap-grid

解决方案

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

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

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

推荐阅读