使用Bootstrap 3和Respond.js在IE8中包装列

本文介绍了使用Bootstrap 3和Respond.js在IE8中包装列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Bootstrap 3创建一个必须与IE8兼容的站点。代码工作正常，大多数浏览器，我添加了respond.js，试图让它在IE8中工作。出于某种原因，在IE8中，第三列总是返回到下一行。

I'm creating a site with Bootstrap 3 that has to be IE8 compatible. The code works fine is most browsers and I've added respond.js to try to make it work in IE8. For some reason in IE8 the third column always returns to the next line. http://jsfiddle.net/suRzm/

<div class="row">
    <div class="container">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>

推荐答案

我知道这是一个旧的，但我会回答只是为了保持它没有得到答复。首先，容器和行类是相反的;而容器应该用来包裹行。其次，如上面提到的 joeldown ，页面需要文档头中的以下内容：< meta name =viewportcontent =width = device -width，initial-scale = 1.0/>

I know this is an old one, but I'll answer just to keep it from going unanswered. First, the "container" and "row" classes are reversed; whereas the container should be used to wrap the row(s). Second, as joeldown mentions above, the page needs the following in the document head: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是一个解决问题的简化HTML文件。当然，实现它的任何人都需要调整CSS和脚本的路径。在FF 17，Chrome 30和IE8上测试...

Here is a simplified HTML file that solves the question. Anyone implementing it will need to adjust paths to the CSS and script, of course. Tested on FF 17, Chrome 30, and IE8...

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>
</body>
</html>

这篇关于使用Bootstrap 3和Respond.js在IE8中包装列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！