{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 狗以群分 的问题《How to make Bootstrap responsive layout work on IE》','https://www.manongdao.com/q-1309418.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
Quite often people load CSS with media queries (bootstrap and other files) from a Content Delivery Networks (CDN, like oss.maxcdn.com or cdnjs.cloudflare.com). Respond.js doesn't work with externally loaded CSS, so you have to load your Bootstrap CSS (or other CSS with media queries) from your server.
yeah it doesn't support IE. i am not anti bootstrap but, I review the css codes of bootstrap framework. and found out that, the other widths are not define as %, i read in other blog article that you should use % for the widths so it will responsive which is true.
and when it comes to ipad, the css code that is using for this by bootstrap is not came from media query, its just a normal css codes that was not declare inside of media queries. and it is fixed width which is you must use for ie7 & 8. (so think about it first if you want to use bootsrap.)
in future(or maybe now) when there is a new gadget that the bootstrap not supported. your client might go back to fix that issue.
we all know that the ie7 & 8 are still existing,so it should have worked on those two old browsers as well.
so if I were you, create your own framework to meet all the requirements of your site/project.
but I am not an anti bootstrap, just a thoughts... because I'm developing sites too..
Try or follow this after all stylesheet "link" tag and just before head tag closed(),it means at the end inside the "head" tag.This format is 99% working in all websites. But in some drupal bootstrap theme does not work.
Remember save all in website local folder, Don't use CDN.
Your issue is trying to use respond.js with CSS stylesheets that are on external domains. Respond.js will fix media queries for IE6-IE8.
https://github.com/scottjehl/Respond#cdnx-domain-setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
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.
Yes in Internet Explorer 8 or lower width of the class 'container' as 940px. But in Internet Explorer9+, Firefox, Google Chrome, etc., the width of the 'contianer' class is calling as 1170px.
The same issue is also in Zurb Foundation.
If suppose our client requested to don't consider the website to view in IE8<, then we start to implement the bootstrap, or zurb foundation RWD feature