2014-02-14 2 views
1

Проблема: IE8 занимает в аккаунте мой макет сетки с Col-х классов. Я нашел связанную/подобную проблему IE8 issue with Twitter Bootstrap 3 wrt Respond.js и htm5shiv. Я пробовал все возможные комбинации, но IE8 по-прежнему игнорирует классы col-sm, col-md и col-lg (теги мультимедиа?).Bootstrap3 игнорирует Col-Л.Г. Col-мкр и Col-см в 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. Я использую

  • Bootstrap 3.1.0
  • html5shiv 3.7.0
  • ответить (последняя версия Февраль/2014 - встроенный 3fde2627484f8cb38e2bd4dbf2374cf41184b0f4)

Что я делаю неправильно? Почему IE8 не использует классы col-lg col-md и col-sm?

Спасибо!

ответ

1

Я нашел проблему. Как-то моя копия response.js была повреждена. С последней версией от Github все работает сейчас, как ожидалось.

0

Попробуйте обратить «направление» перевалы в противоположном направлении от:

<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, это сказать, что глядя на сетке должно начинаться самый маленький блок и прокладывайте себе путь к самому большому концу. Так ... может, это и есть причина?

+0

Спасибо за вашу идею. Я перестроил заказ к вашему предложению, но он остался прежним. На большом экране (1400px) он все еще использует col-xs вместо col-lg – DH1TW

Смежные вопросы