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;">
</div>
<div class="col-sm-4" style="background:green;">
</div>
<div class="col-sm-4" style="background:blue;">
</div>
</div>
</div>
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;">
</div>
<div class="col-sm-4" style="background:green;">
</div>
<div class="col-sm-4" style="background:blue;">
</div>
</div>
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/18966522/wrapping-columns-in-ie8-using-bootstrap-3-and-respond-js