Центрирование столбца с Twitter bootstrap не работает

Question

У меня есть простое поле регистрации, которое я хочу расположить по центру экрана по горизонтали. Пользуюсь твиттером bootstrap 4.5. Проблема в том, что поле всегда отображается в левой части экрана, игнорируя все попытки центрировать его по горизонтали. Я попробовал это с примерами из руководства, добавив класс justify-content-center, я попробовал mx-auto в столбце div, я пробовал даже вручную с настройками margin-left и margin-right на auto - ничего не сработало. У меня был другой веб-сайт, на котором я использовал точно такую ​​же стратегию, и она там работала, с той лишь разницей, что я использовал там bootstrap 4.0. Не могли бы вы мне помочь? Даже если удалить все внутренние html и вывести только простое «Привет», это не работает.

Я благодарен за любой вопрос и большое спасибо вперед!

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>