Bootstrap 4 - IE11 - 对齐中心自我失去宽度的行答案

【问题标题】：Bootstrap 4 - IE11 - row with align-center-self losing widthBootstrap 4 - IE11 - 对齐中心自我失去宽度的行
【发布时间】：2018-08-15 18:59:39
【问题描述】：

我正在尝试对齐我的 .row - IE11 中以 y 轴为中心的元素，但它似乎不起作用。

我的 HTML：

<section class="home-section">
    <div class="container home-section-inner d-flex">
        <div class="row align-self-center">
            <div class="offset-lg-1 col-lg-8 ">
                <h1 class="approach-hero text-white">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h1>
                <p class="approach-hero--quote text-muted">Quote Lorem Ipsum</p>
            </div>
        </div>
    </div>
</section>

我的 CSS：

html,body {
    min-height: 100%;
    width: 100%;
}

.home-section {
    height: calc(100vh - 30px);
    width: calc(100% - 30px);
    margin: 15px;
    background: linear-gradient(rgba(31, 64, 120, 0.9), rgba(31, 64, 120, 0.9)),url(https://placeimg.com/1920/1080/arch) no-repeat center center;
    background-size: cover;
}

.home-section .home-section-inner {
    height: 100%;
    width: 100%;
}

Codepen：https://codepen.io/grmnn/pen/mxbdGe

【问题讨论】：

标签： twitter-bootstrap internet-explorer flexbox bootstrap-4 internet-explorer-11

【解决方案1】：

将w-100 添加到row 是一种解决方法...

https://codepen.io/anon/pen/wmwadO

这很可能是一个 IE/Edge flexbox 错误。

【讨论】：