Bootstrap 4 - IE11 - 对齐中心自丢失宽度的行

Question

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

我的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%;
}

代码笔：https://codepen.io/grmnn/pen/mxbdGe

Answer 1

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

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

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

Bootstrap 4 - IE11 - 对齐中心自丢失宽度的行

Bootstrap 4 - IE11 - row with align-center-self losing width

internet-explorer

flexbox

twitter-bootstrap

internet-explorer-11

bootstrap-4