Question

下面是带有iframe的简单html页面。在这个iframe里面是一些流畅的行。现在的问题是iframe中的内容是堆叠的，但它应该在同一行上。有足够的空间来标记＆＃34;标签＆＃34;和＆＃34;主要内容＆＃34;在同一条线上。

以下是主页的代码：

<!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>

结果现在是：
标签
主要内容
标签1
主要内容1

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

有人知道我怎样才能达到预期效果？

Answer 1

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

以下是bootstrap-responsive.css

的示例

http://jsfiddle.net/ebrPt/（尝试减小宽度）

这是没有响应css的例子

http://jsfiddle.net/ebrPt/1/（尝试减小宽度）

Answer 2

最后，当我在iframe中时，我最终覆盖了一些bootstrap的媒体标签

@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;
    }
}

iframe中的引导代码未正确呈现

2 个答案: