如何根据该图片对齐文本？

Question

我一直在尝试通过引导程序相应地对齐文本，但我无法这样做

我想做什么：

到目前为止，我已经能够做到：

我的代码：

      <!-- <app-dr-peter></app-dr-peter> -->
      <div style="text-align: center">
        <h1>Dr. Peters</h1>
      </div>
      <div style="text-align: center">
        <h2>Estimated Wait Time <u>{{ waitTimePeter }} min.</u></h2>
      </div>
      <br>
      <div *ngFor="let ptr of DrPtrData; let i = index">
        <h3 class="d-lg-inline-block">{{ i+1 }}. {{ ptr.name }}</h3>
        <h3 class="d-lg-inline-block">{{ ptr.eta }}</h3>
      </div>
    </div>```

Answer 1

您可以尝试在包含的div上尝试使用Bootstraps flexbox实用程序，例如d-lg-inline-block，而不使用d-flex。这是一个示例：

<div *ngFor="let ptr of DrPtrData; let i = index" class="d-flex justify-content-between">
  <h3>{{ i+1 }}. {{ ptr.name }}</h3>
  <h3>{{ ptr.eta }}</h3>
</div>

要减少两列之间的间距，可以将其包装在具有固定宽度的容器中：

<div style="width: 400px">
   ... [your list goes here]
</div>

这只是一个示例，最好将css类用于固定宽度。