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

Question

I'm creating a site with Bootstrap 3 that has to be IE8 compatible. 我正在使用Bootstrap 3创建一个必须与IE8兼容的站点。 The code works fine is most browsers and I've added respond.js to try to make it work in IE8. 代码工作正常，大多数浏览器，我添加了respond.js，试图让它在IE8中工作。 For some reason in IE8 the third column always returns to the next line. 出于某种原因，在IE8中，第三列总是返回到下一行。 http://jsfiddle.net/suRzm/ 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>

在此输入图像描述

Answer 1

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" /> 其次，正如joeldown提到的joeldown ，页面需要文档头中的以下内容： <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Here is a simplified HTML file that solves the question. 这是一个简化的HTML文件，可以解决这个问题。 Anyone implementing it will need to adjust paths to the CSS and script, of course. 当然，实现它的任何人都需要调整CSS和脚本的路径。 Tested on FF 17, Chrome 30, and IE8... 在FF 17，Chrome 30和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中包装列

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-02-07 23:03:31

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-02-07 23:03:31

解决方案1
1 已采纳 2014-02-07 23:03:31