Bootstrap3 在 IE8 中忽略 col-lg col-md 和 col-sm答案

【问题标题】：Bootstrap3 ignores col-lg col-md and col-sm in IE8Bootstrap3 在 IE8 中忽略 col-lg col-md 和 col-sm
【发布时间】：2014-02-14 18:56:03
【问题描述】：

问题： IE8 只考虑了我的带有 col-x 类的网格布局。我发现了一个相关/类似的问题IE8 issue with Twitter Bootstrap 3 wrt Respond.js 和 htm5shiv。我已经尝试了所有可能的组合，但 IE8 仍然忽略了我的 col-sm、col-md 和 col-lg 类（媒体标签？）。

这是我的演示 HTML 代码，它不起作用：

{% load staticfiles i18n %}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/test.css" rel="stylesheet"> 

<!--[if lt IE 9]>
  <script src="{{ STATIC_URL }}js/html5shiv.min.js"></script>
  <script src="{{ STATIC_URL }}js/respond.min.js"></script>
<![endif]-->

</head>
<body>
<div class="container">
    <div class= "row">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 yellow">
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 green">
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 red">
        </div>
    </div>
</div>

{{STATIC_URL}} 只是指向我的本地静态目录。

这是CSS：

.yellow{
background-color: yellow;
height: 100px;
border: 2px solid black;}

.green{
background-color: green;
height: 100px;
border: 2px solid black;}

.red{
background-color: red;
height: 100px;
border: 2px solid black;}

我已验证 JS 和 CSS 文件已在 IE8 中加载。我正在使用

引导程序 3.1.0
html5shiv 3.7.0
响应（最新版本 2014 年 2 月 - 内置 3fde2627484f8cb38e2bd4dbf2374cf41184b0f4）

我做错了什么？为什么 IE8 不使用我的 col-lg col-md 和 col-sm 类？

谢谢！

【问题讨论】：

标签： javascript html twitter-bootstrap internet-explorer-8

【解决方案1】：

我发现了问题。不知何故，我的 response.js 副本已损坏。使用来自 Github 的最新版本，现在一切正常。

【讨论】：

【解决方案2】：

尝试以相反的方式反转 cols 的“方向”：

 <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3"></div>

到这里：

  <div class="col-xs-3 col-sm-1 col-md-1 col-lg-1"></div>

在引导网格的指导方针中，它指出盯着网格应该从最小的单元开始，然后按照自己的方式到最后。所以……也许这就是原因？

【讨论】：

感谢您的想法。我根据您的建议重新排列了顺序，但它保持不变。在大屏幕（1400px）上，他仍然使用 col-xs 而不是 col-lg