使用 angular *ngFor 时 bootstrap 网格列中的中心按钮

Question

我正在使用 bootstrap 4 网格系统来显示一些按钮。我想将列中的按钮水平居中 - 这里是带有绿色边框的列。到目前为止，对 justify-content-center 的所有尝试都失败了。

<div class="row" style="border:1px solid red;">
  <div class="col">
    <button mat-raised-button>text</button>
    <div *ngFor="let text of buttonText">
      <button mat-raised-button>text</button>
    </div>
  </div>
</div>

这个例子给出了结果

我要找的结果是

Stackblitz 上的相同示例： https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src/app/app.component.html

Answer 1

Bootstrap 有一个 class text-center 可以满足您的需求。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 text-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
  </div>
</div>

Answer 2

有很多不同的方法。一种方法是使用 flexbox 工具...

<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 d-flex justify-content-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
  </div>
</div>

使用 angular *ngFor 时 bootstrap 网格列中的中心按钮

Centre buttons within bootstrap grid column when using angular *ngFor

css

bootstrap-4

bootstrap-grid