IE 11 中的 Bootstrap 4 对齐答案

【问题标题】：Bootstrap 4 alignment in IE 11IE 11 中的 Bootstrap 4 对齐
【发布时间】：2019-04-12 10:58:37
【问题描述】：

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

【问题讨论】：

检查 bootstrap 4 API，因为大部分类名都变了，ng-bootstrap 也使用 bootstrap 4。
@Pankaj 我做到了，col-xs-12 变成 col-12 等等......我必须添加网格 div，所以我让它在所有浏览器中工作，但是 IE11，我的问题更多地围绕着我还需要做什么才能让它在 IE11 中运行。
在花了更多时间之后，我最好的解决方案是完全摆脱 row / col 并只使用 div 因为它只是一个模式，但是我仍然喜欢 bs4 解决方案作为其他解决方案新网站的部分内容受到影响，我尝试了 flex: 1 0 auto 和其他一些解决方案，但都没有成功，所以我添加了一个赏金来帮助引起注意。
您是否尝试使用 -ms 前缀修改 css？等效于 chrome 的 webkit，但适用于 IE11 及更高版本
你能发一些工作链接吗？

标签： angular bootstrap-4 bootstrap-modal

【解决方案1】：

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

flex: 1 0 auto;

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

【讨论】：

【解决方案2】：

您可以尝试使用container-fluid而不是container

看起来它可能与某些width:auto 样式有关？ Bootstrap 4 IE 11 does not work

如果您在 IE 和 Chrome 上并排查看该网站，您可以使用 F12 开发工具查看元素和样式，您只需找到呈现不同的元素/样式。

【讨论】：

如果您可以创建 StackBlitz 或类似的东西，我们可以在线查看

【解决方案3】：

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


div{
display:block;
float:left;
}

【讨论】：

虽然这可能会为问题提供解决方案，但您应该更详细地描述原因。