iframe中的引導代碼未正確呈現

下面是帶有iframe的簡單html頁面。這個iframe裏面有一些流體行。現在的問題是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>

結果是現在：
標籤
主要內容
標籤1
主要內容1

，而不是
標籤主要內容
標籤1項主要內容1

是否有人知道我怎麼能達到預期的效果？

來源

2013-04-11 Laoneo

iframe的寬度爲500px，如果您使用Twitter Bootstrap css進行響應式佈局，媒體查詢將打破小屏幕的佈局。您可以使用當前標記，但刪除Twitter Bootstrap響應CSS。

下面是例如與bootstrap-responsive.css

http://jsfiddle.net/ebrPt/（儘量減少寬度）

這裏是不敏感的CSS例子

http://jsfiddle.net/ebrPt/1/（儘量減少寬度）

來源

2013-04-11 11:49:29

爲什麼要移除響應式佈局？我沒有看到你的jsfiddles有什麼不同。你有沒有在Web服務器上試用我的例子？我猜測是引導程序錯誤地確定了iframe的寬度，而不是屏幕寬度。 – Laoneo 2013-04-11 12:16:49

您在我的jsfiddles中看不到任何區別？奇怪...你的iframe的屏幕寬度是500px，所以Bootstrap在iframe中打破了小屏幕尺寸的佈局。 – 2013-04-11 12:19:10

引導程序不應考慮iframe（500px）內的空間寬度而不是屏幕大小。 – Laoneo 2013-04-11 12:42:26

最後，我結束了當我處於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; 
    } 
}

來源

2013-04-13 08:08:35 Laoneo

iframe中的引導代碼未正確呈現

回答

相關問題