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>

結果は次のようになります:
ラベル
メイン コンテンツ
ラベル 1
メイン コンテンツ 1


ラベル メイン コンテンツ
ラベル 1 メイン コンテンツ 1 の代わりに

どうすれば望ましい結果を達成できるか誰かが知っていますか?

4

2 に答える 2

1

iframe の幅は 500px です。レスポンシブ レイアウトに 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 に答える