gpt4 book ai didi

twitter-bootstrap - 使用 Bootstrap 3 和 Respond.js 在 IE8 中包装列

转载 作者:行者123 更新时间:2023-12-04 07:48:13 24 4
gpt4 key购买 nike

我正在使用必须与 IE8 兼容的 Bootstrap 3 创建一个站点。代码在大多数浏览器中工作正常,我添加了 respond.js 以尝试使其在 IE8 中工作。由于某些原因,在 IE8 中,第三列总是返回到下一行。 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>

enter image description here

最佳答案

我知道这是一个旧问题,但我会回答只是为了避免无人回答。首先,将“容器”和“行”类颠倒过来;而容器应该用于包装行。二、如joeldown上面提到,该页面需要在文件头中包含以下内容:<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是解决问题的简化 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>

关于twitter-bootstrap - 使用 Bootstrap 3 和 Respond.js 在 IE8 中包装列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18966522/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com