Question

问题： 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中加载的。我正在使用

Bootstrap 3.1.0
html5shiv 3.7.0
回复（最新版本2014年2月 - 内置3fde2627484f8cb38e2bd4dbf2374cf41184b0f4）

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

谢谢！

Answer 1

我发现了问题。不知怎的，我的respond.js副本已经腐败了。使用Github的最新版本，现在一切正常。

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

在bootstrap griding的指导原则中，它指出，凝视网格应该从最小的单元开始，然后以最大的方式工作。那么......也许这就是原因？

Bootstrap3忽略了IE8中的col-lg col-md和col-sm

2 个答案: