2

下面是带有 iframe 的简单 html 页面。在这个 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="span12">
<iframe src="frame.html" width="500px"></iframe>
</div>
</div>
</body>
</html>

这是 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>

现在的结果是：
label
main content
label 1
main content 1

而不是
标签主要内容
标签1主要内容1

有人知道我怎样才能达到预期的结果吗？

4

2 回答 2

1

iframe 的宽度为 500 像素，如果您使用 Twitter Bootstrap css 进行响应式布局，媒体查询将破坏您的小屏幕布局。您可以使用当前标记，但删除 Twitter Bootstrap 响应式 CSS。

下面是示例bootstrap-responsive.css

http://jsfiddle.net/ebrPt/（尽量减小宽度）

这是没有响应式 css 的示例

http://jsfiddle.net/ebrPt/1/（尽量减小宽度）

于 2013-04-11T11:49:29.220 回答
0

最后，当我在 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;
    }
}
于 2013-04-13T08:08:35.493 回答