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
但不是我想要的，就像你在“想要的结果”图片中看到的那样。 –