Twitter bootstrap 使用bootstrap3和Respond.js包装IE8中的列_Twitter Bootstrap_Internet Explorer 8_Twitter Bootstrap 3_Respond.js

Twitter bootstrap 使用bootstrap3和Respond.js包装IE8中的列

twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

Twitter bootstrap 使用bootstrap3和Respond.js包装IE8中的列,twitter-bootstrap,internet-explorer-8,twitter-bootstrap-3,respond.js,Twitter Bootstrap,Internet Explorer 8,Twitter Bootstrap 3,Respond.js,我正在使用Bootstrap3创建一个必须与IE8兼容的站点。代码在大多数浏览器中都能正常工作，我添加了respond.js以使其在IE8中工作。由于某些原因，在IE8中，第三列总是返回到下一行我知道这是一个老问题，但我会回答，只是为了避免没有人回答。首先，将“container”和“row”类颠倒过来；而容器应用于包装行。其次，正如上面提到的，页面需要在文档头中包含以下内容：下面是一个简化的HTML文件，它解决了这个问题。当然，任何实现它的人都需要调整CSS和脚本的路径。在FF 17、

我正在使用Bootstrap3创建一个必须与IE8兼容的站点。代码在大多数浏览器中都能正常工作，我添加了respond.js以使其在IE8中工作。由于某些原因，在IE8中，第三列总是返回到下一行

我知道这是一个老问题，但我会回答，只是为了避免没有人回答。首先，将“container”和“row”类颠倒过来；而容器应用于包装行。其次，正如上面提到的，页面需要在文档头中包含以下内容：

下面是一个简化的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>


引导样本

以下内容的可能重复为我修复了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>