Bootstrap列在IE11中无法正常显示（Flex布局问题）

问题重现 #

先看你提供的代码结构：

.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等现代浏览器中，.col-12能正常撑满.container，但在IE11里却无法达成预期，核心原因是IE11对Flexbox的支持存在多处兼容性缺陷，尤其是和Bootstrap 4的flex布局结合时，很多现代浏览器默认的行为在IE11里需要显式声明。

问题根源拆解 #

1. .container作为flex容器的子元素宽度问题：IE11中，flex容器的直接子元素不会自动继承容器的100%宽度，你的.container设置了d-flex，它的子元素.row在IE11里只会占据内容宽度，不会主动撑满容器。
2. Bootstrap网格在IE11 flex环境下的失效：.col-12依赖父元素.row的正确宽度计算，但如果.row本身没撑满.container，.col-12自然也无法撑满。
3. flex-column容器的子元素计算偏差：你之前修改.text__wrap的flex属性没用，是因为问题根源不在最内层，而在外层的flex容器链上，内层元素即使设置了100%宽度，也没有足够的父容器宽度可以继承。

解决方案 #

我们需要从外层到内层逐一修正IE11的flex行为：

步骤1：确保.row撑满.container #

给.row添加width: 100%;或者flex: 1 1 100%;，强制它撑满flex容器.container：

.row {
  width: 100%;
  /* 或者用flex shorthand，IE11对这个支持更稳定：
  flex: 1 1 100%;
  */
}

步骤2：强化.col-12的宽度声明 #

虽然Bootstrap的.col-12默认是width: 100%，但在IE11的flex环境下，我们可以显式添加flex: 1 1 100%;来确保它不会被收缩：

.col-12 {
  flex: 1 1 100%;
}

步骤3：修正.text__wrap的flex设置 #

现在再给.text__wrap添加width: 100%;，确保它撑满.col-12：

.text__wrap {
  width: 100%;
  /* 保留你的flex-column设置，同时可以加flex: 1来确保它占据父元素的可用空间 */
  flex: 1;
}

完整修改后的代码 #

.hero{ background:lightgrey; padding: 50px 0px; }
.row {
  width: 100%;
}
.col-12 {
  flex: 1 1 100%;
}
.text__wrap {
  width: 100%;
  flex: 1;
}

<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>

内容的提问来源于stack exchange，提问作者Freddy