资源管理器 v.11 中的引导包装损坏答案

【问题标题】：Bootstrap wrap broken in explorer v.11资源管理器 v.11 中的引导包装损坏
【发布时间】：2017-06-20 14:37:22
【问题描述】：

我正在尝试实现一个包含 4 列的网格系统，但资源管理器不会让我正确呈现它。（我需要它在兼容性视图中工作）

代码在 Chrome 和下面的 sn-p 中运行良好。在 IE 中执行此操作的任何提示？

.centercontainer {
  margin: 0px auto;
  float: none;
  margin-top: 1%;
  border: 1px solid red;
}

.maincol {
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="widt=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container centercontainer" style="width: 960px">
    <div class="row">
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
    </div>
    <div class="row">
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
      <div class="col-xs-3 text-center">hej</div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

你用的是哪个版本的IE？
我使用的是 Internet Explorer 11.576
其实上面的代码对我来说很好用
不幸的是，不适合我。它呈现如屏幕截图所示。

标签： html css twitter-bootstrap grid

【解决方案1】：

所以无论我做什么，如果不禁用兼容性视图，我都无法解决这个问题。这会 100% 修复网格。

【讨论】：