使用 Twitter 引导程序将列居中不工作

Question

我有一个简单的注册框，我想在屏幕上水平居中。 我使用推特引导程序 4.5。问题是，盒子总是呈现在屏幕左侧附近，忽略了将其水平居中的每一次尝试。我通过添加类 justify-content-center 来尝试使用手册中的示例，我在 col div 上尝试了 mx-auto，我什至手动尝试了它，将 margin-left 和 margin-right 设置为 auto - 没有任何效果。我有一个不同的网站，在那里我使用了完全相同的策略并且它在那里工作 - 唯一的区别是我在那里使用了 bootstrap 4.0。你能帮我么？即使删除所有内部 html 并仅打印一个简单的“Hello”，它也不起作用。

感谢任何问题，非常感谢转发！

<div class="container">
  <div class="row justify-content-center">
    <div class="col mx-auto">
      <div class="card" style="width: 18rem;">
        <div class="card-header">
          <h4 class="mb-0">Register</h4>
        </div>
        <div class="card-body">

          <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">

            <div [hidden]="formDir.submitted && heroForm.valid">

              <div class="cross-validation"
                [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
                <div class="form-group">
                  <label for="name">User Name</label>
                  <input id="username" type="text" class="form-control" formControlName="username" required>
                  <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                    <div *ngIf="username.errors.required">
                      Name is required.
                    </div>
                    <div *ngIf="username.errors.minlength">
                      Name must be at least 4 characters long.
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="name">Email</label>
                  <input id="email" type="email" class="form-control" formControlName="email" required>
                  <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="email.errors.required">
                      Email is required.
                    </div>
                    <div *ngIf="email.errors.email">
                      You must enter a valid email address
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="password">Password</label>
                  <input id="password" type="password" class="form-control" formControlName="password" required>
                  <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="password.errors.required">
                      Password is required.
                    </div>
                    <div *ngIf="password.errors.minlength">
                      Password must be at least 4 characters long.
                    </div>
                  </div>
                </div>
              </div>

              <button class="button" type="submit" >Register</button>
            </div>
          </form>

          <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">
            <p>You've registered your with user {{ heroForm.value.username }}!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

一切都很完美，但需要一点css，bootstrap 不会帮助您将div 的内容居中

在 row 类中我添加了这个 css 属性

display: table; margin: 0 auto;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
  <div class="container">
    <div class="row" style="display: table; margin: 0 auto;">
      <div class="col">
        <div class="card" style="width: 18rem;">
          <div class="card-header">
            <h4 class="mb-0">Register</h4>
          </div>
          <div class="card-body">

            <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">

              <div [hidden]="formDir.submitted && heroForm.valid">

                <div class="cross-validation"
                  [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
                  <div class="form-group">
                    <label for="name">User Name</label>
                    <input id="username" type="text" class="form-control" formControlName="username" required>
                    <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                      <div *ngIf="username.errors.required">
                        Name is required.
                      </div>
                      <div *ngIf="username.errors.minlength">
                        Name must be at least 4 characters long.
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="name">Email</label>
                    <input id="email" type="email" class="form-control" formControlName="email" required>
                    <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                      <div *ngIf="email.errors.required">
                        Email is required.
                      </div>
                      <div *ngIf="email.errors.email">
                        You must enter a valid email address
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="password">Password</label>
                    <input id="password" type="password" class="form-control" formControlName="password" required>
                    <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                      <div *ngIf="password.errors.required">
                        Password is required.
                      </div>
                      <div *ngIf="password.errors.minlength">
                        Password must be at least 4 characters long.
                      </div>
                    </div>
                  </div>
                </div>

                <button class="button" type="submit">Register</button>
              </div>
            </form>

            <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">
              <p>You've registered your with user {{ heroForm.value.username }}!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>