Bootstrap3忽略COL-LG COL-MD和COL-SM在IE8

問題： IE8只需要在COL-X類佔我的網格佈局。我發現了一個相關/類似的問題IE8 issue with Twitter Bootstrap 3與Respond.js和htm5shiv。我嘗試了所有可能的組合，但IE8仍然忽略我的col-sm，col-md和col-lg類（媒體標籤？）。Bootstrap3忽略COL-LG COL-MD和COL-SM在IE8

這裏是我的演示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 - 建3fde2627484f8cb38e2bd4dbf2374cf41184b0f4）

我在做什麼錯？爲什麼IE8不使用我的col-lg col-md和col-sm類？

謝謝！

來源

2014-02-14 DH1TW

我發現了這個問題。不知何故，我的respond.js副本已損壞。使用Github的最新版本，現在按預期工作。

來源

2014-02-16 22:48:13 DH1TW

嘗試從扭轉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>

在自舉griding的方針，它指出盯着網格應在開始最小的單位，並以最快的方式工作。所以......也許這就是原因？

來源

2014-02-14 18:58:52 Faron

感謝您的想法。我按照您的建議重新排列了順序，但仍然保持不變。在大屏幕上（1400px），他仍然使用col-xs而不是col-lg – DH1TW

Bootstrap3忽略COL-LG COL-MD和COL-SM在IE8

回答

相關問題