twitter-bootstrap iframe 中的引导代码未正确呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15947212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap code in an iframe is not rendered properly
提问by Laoneo
Below is simple html page with an iframe. Inside this iframe are some fluid rows. The problem is now that the content in the iframe is stacked but it should be on the same row. There is enough space for "label" and "main content" to be on the same line.
下面是带有 iframe 的简单 html 页面。在这个 iframe 里面有一些流动的行。现在的问题是 iframe 中的内容是堆叠的，但它应该在同一行上。有足够的空间让“标签”和“主要内容”在同一行。
Here is the code of the main page:
下面是主页面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<iframe src="frame.html" width="500px"></iframe>
</div>
</div>
</body>
</html>
Here is the code of the iframe:
这是 iframe 的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span6">label</div>
<div class="span6">main content</div>
</div>
<div class="row-fluid">
<div class="span6">label 1</div>
<div class="span6">main content 1</div>
</div>
</body>
</html>
The result is now:
label
main content
label 1
main content 1
现在的结果是：
label
main content
label 1
main content 1
instead of
label main content
label 1 main content 1
而不是
标签主要内容
标签1主要内容1
Does somebody know how can I achieve the desired result?
有人知道我怎样才能达到预期的结果吗？
采纳答案by Miljan Puzovi?
Width of your iframe is 500px, and if you are using Twitter Bootstrap css for responsive layout, media queries will break your layout for small screens. You can use current markup, but remove Twitter Bootstrap responsive CSS.
iframe 的宽度为 500 像素，如果您使用 Twitter Bootstrap css 进行响应式布局，媒体查询将破坏小屏幕的布局。您可以使用当前标记，但删除 Twitter Bootstrap 响应式 CSS。
Below is example with bootstrap-responsive.css
下面是示例 bootstrap-responsive.css
http://jsfiddle.net/ebrPt/(try to decrease width)
http://jsfiddle.net/ebrPt/（尝试减小宽度）
And here is example without responsive css
这是没有响应式 css 的示例
http://jsfiddle.net/ebrPt/1/(try to decrease width)
http://jsfiddle.net/ebrPt/1/（尝试减小宽度）
回答by Laoneo
Finally I ended up overriding some media tags of bootstrap when I'm in an iframe
最后，当我在 iframe 中时，我最终覆盖了引导程序的一些媒体标签
@media screen and (max-width: 767px) {
.row-fluid [class*="span"] {
float: left !important;
width: 49% !important;
margin: 0 !important;
}
}
@media screen and (max-width: 480px) {
.row-fluid [class*="span"] {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
}
