Wrapping columns in IE8 using Bootstrap 3 and Respond.js

百般思念 提交于 2019-12-07 12:49:46

问题


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>


回答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" />

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>


来源:https://stackoverflow.com/questions/18966522/wrapping-columns-in-ie8-using-bootstrap-3-and-respond-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!