logo标签列表

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

twitter-bootstrapinternet-explorer-8twitter-bootstrap-3respond.js
3

我正在使用Bootstrap 3创建一个网站，需要兼容IE8浏览器。代码在大多数浏览器中都能正常工作，并且我已经添加了respond.js以尝试使其在IE8中正常工作。但是在IE8中，第三列始终会移到下一行。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>

enter image description here

可能是IE8与Twitter Bootstrap 3的问题重复。 - Bass Jobsen
3
以下内容可以解决IE8的问题。<meta http-equiv="X-UA-Compatible" content="IE=edge"> - joeldow
1个回答
1
我知道这是一个老问题，但我会回答以防止它被忽略。首先，“container”和“row”类是相反的；容器应该用于包装行。其次，如上面的joeldown所提到的，页面需要在文档头中添加以下内容：<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 以下是解决问题的简化HTML文件。当然，任何人实施它都需要调整CSS和脚本的路径。在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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接