How to make Bootstrap responsive layout work on IE8
I've been search for a while and found some people got it working, but none of them provide any code samples.
I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.js or css3-mediaqueries-js, but none of them helped.
Here's a jsfiddle, if you view it with IE8, you'll see both a and b are on the same row regardless of your browser width.
But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.
UPDATE
I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span8">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
<%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
<%--<script type="text/javascript" src="js/respond.js"></script>--%>
</script>
</body>
</html>
Answer
IE 8 doesn't support media queries out of the box.
Based on this question and this question, you're going to want to use an extension like css3-mediaqueries-js or Respond.