IE 11 中的 Bootstrap 4 對齊

Question

我正在將我的網站之一從 AngularJs/Bootstrap 3 轉換為 Angular 6/Bootstrap。

在 Chrome 和 firefox 以及 edige 中，我的模態如下所示：

但是，在 IE11

編碼：

<div class="container">
    <div class="modal-header">
    </div>
    <div class="modal-body">
      <form [formGroup]="loginForm" (keydown.enter)="onKeydown($event)">
          <div class="row form-group">
              <div class="col-12">
                  <input type="email" class="form-control" placeholder="Email" formControlName="userName" required autofocus />
                  <p *ngIf="!isValidUserName" class="help-block alert-danger">Invalid Username</p>
              </div>
          </div>
          <div class="row form-group">
            <div class="col-12">
                <input type="password" class="form-control" placeholder="Password" formControlName="password" required />
                <p *ngIf="!isValidPassword" class="help-block alert-danger">Invalid Password</p>
            </div>
          </div>
      </form>
    </div>
    <div class="modal-footer">
        <div class="grid">
            <div class="row">
                <div class="col-12">
                    <button class="btn loginBtn" (click)="login(userName.value, password.value)">
                        Login
                    </button>
                    <p *ngIf="loginError" class="help-block alert-danger">{{ loginError }}</p>
                </div>
            </div>
            <div class="row form-group">
                <div class="col text-center">
                    <label class="forgotPasswordLink" (click)="openForgotPasswordModal()">
                        Forgot password?
                    </label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-12 col-md-6">
                    <button type="button" (click)="googleLogin()" class="btn btnGoogle googleIcon">
                        <span class="button-text">Login with Google</span>
                    </button>
                </div>
                <div class="col-12 col-md-6">
                    <button type="button" (click)="linkedInLogin()" class="btn btnLinkedIn linkedinIcon">
                        <span class="button-text">Login with LinkedIn</span>
                    </button>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-12 text-center">
                    Don't have an account? <a (click)="signUp()">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</div>

我查看了 github，但據我所知，這些解決方案似乎都不起作用，有沒有辦法在站點級別解決這種不一致問題？

Answer 1

我能夠通過添加來解決一個非常相似的問題

flex: 1 0 auto; 

在包含模式消息/文本的col-12 span上。

Answer 2

而不是使用的container你可以嘗試使用container-fluid

看起來它可能與某些width:auto樣式有關？ Bootstrap 4 IE 11 不起作用

如果您在 IE 和 Chrome 上並排查看站點，您可以使用 F12 開發工具查看元素和樣式，您只需要找到呈現不同的元素/樣式。

Answer 3

.container,.modal-header,.modal-body,modal-footer, input{
width: 100% !important;
}


div{
display:block;
float:left;
}