IE 11中的Bootstrap 4对齐 [英] Bootstrap 4 alignment in IE 11

问题描述

我要将自己的网站之一从AngularJs/Bootstrap 3转换为Angular 6/Bootstrap.

I'm converting one of my websites from AngularJs / Bootstrap 3 to Angular 6 / Bootstrap.

在Chrome，firefox和edige中，我的模态如下:

In Chrome and firefox, and edige, my modal looks like this:

但是，在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，但是据我所知，这些解决方案似乎都不起作用，有没有办法在站点级别解决这种不一致的问题?

I took a look on github, but none of those solutions seem to work to the best of my knowledge, is there a way to fix this inconsistency at a site level?

推荐答案

我能够通过添加解决一个非常相似的问题

I was able to fix a very similar issue by adding

flex: 1 0 auto; 

在span上的

与col-12一起包含模态的消息/文本.

on span with col-12 that contained the message/text of the modal.

这篇关于IE 11中的Bootstrap 4对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！