Bootstrap 列在 IE11 (Flex) 中不起作用

Question

我有以下标记：

.hero{
  background:lightgrey;
  padding: 50px 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="hero">

  <div class="container d-flex align-items-center">
    <div class="row">
      <div class="col-12">
        <div class="text__wrap d-flex flex-column">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
        </div>
      </div>
    </div>
  </div>

</div>

在 Chrome（和大多数其他浏览器）中，列按预期呈现。但是，在 IE11 中，该列不跨越 .container.

我已经看到了其他几个关于此的问题并尝试了以下方法：

.text__wrap{
  flex-basis: 100%
  /* flex: 1
  width: 100%; */
}

...两者都没有用。我哪里错了？

Answer 1

看来问题与d-flex有关。尝试从 .container div.

中删除 d-flex

使用以下代码：

<div class="hero">

    <div class="container align-items-center">
        <div class="row">
            <div class="col-12">
                <div class="text__wrap d-flex flex-column">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
                </div>
            </div>
        </div>
    </div>

</div>

结果是这样的：

Bootstrap 列在 IE11 (Flex) 中不起作用

Bootstrap columns not working in IE11 (Flex)

html

css

internet-explorer-11

bootstrap-4