3

Bootstrap 3 を使用して IE8 と互換性のあるサイトを作成しています。コードはほとんどのブラウザーで正常に動作します。IE8 で動作するように、respond.js を追加しました。IE8 では何らかの理由で、3 列目は常に次の行に戻ります。 http://jsfiddle.net/suRzm/

<div class="row">
    <div class="container">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>

ここに画像の説明を入力

4

1 に答える 1

1

これが古いものであることは知っていますが、回答がないままにならないように回答します。まず、「コンテナー」クラスと「行」クラスが逆になります。一方、コンテナは行をラップするために使用する必要があります。次に、joeldown前述のように、ページのドキュメント ヘッドに次のものが必要です。<meta name="viewport" content="width=device-width, initial-scale=1.0" />

これは、質問を解決する単純化された HTML ファイルです。もちろん、それを実装する人は、CSS とスクリプトへのパスを調整する必要があります。FF 17、Chrome 30、IE8 でテスト済み...

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>
</body>
</html>
于 2014-02-07T23:03:31.517 に答える