0
我使用引導程序3，因爲我被告知它與資源管理器8兼容。我之前正在使用基礎。Bootstrap Grid IE 8兼容性
但我試圖讓引導網格在Explorer上工作沒有成功。
當我在Firefox上使用網格時，它很簡單。你可以在類行中使用div，並將類放在col-md- *中。
這適用於Firefox，但在資源管理器8上它只是將div彼此嵌套。
我設法使它在Firefox和Explorer 8上使用usign col-xs- *。但是，當我改變窗口大小以模擬它在移動設備上的顯示效果時，它只是擴展了div，而不是像預期的那樣將它們堆疊在一起。
現在我有一個dillema。 Col-xs在Explorer上工作，但不響應。列數-MD在每個設備上工作，除了Explorer 8的
這是我的測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Bootstrap test</title>
</head>
<body>
<div class="main container-fluid">
<header class="jumbotron text-center">
<h1>Bootstrap test</h1>
</header>
<section class="row">
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
</div>
<div class="col-md-3">
<h3>Menu</h3>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>
上面的代碼工作的Firefox，但不是在瀏覽器8
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Bootstrap test</title>
</head>
<body>
<div class="main container-fluid">
<header class="jumbotron text-center">
<h1>Bootstrap test</h1>
</header>
<section class="row">
<div class="cols-xs-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
</div>
<div class="cols-xs-3">
<h3>Menu</h3>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>
此代碼工作與資源管理器，但沒有響應。
看起來非常好，我的IE8標準。 – Jonathan
但不是我想要的，就像你在「想要的結果」圖片中看到的那樣。 –