1

編集============================================== =============================

Nick Rは、レスポンシブ デザインが原因で機能しないと述べていますが、これは TRUE です。css をデフォルト (レスポンシブではない) に変更した後、動作しています。

ただし、新しい質問があります。

この引用は、ブートストラップの公式 Web から取得したものです。

流体グリッド システムでは、列幅にピクセルではなくパーセントが使用されます。固定グリッド システムと同じ応答機能を備えているため、主要な画面解像度とデバイスの適切な比率が保証されます。

それで、row-fluidクラスがすでにレスポンシブ（画面サイズに適応）しているので、レスポンシブcssを使用する必要がないということですか？

ありがとう

編集============================================== =============================

プロジェクトにブートストラップ ライブラリを実装しようとしています。そのレスポンシブ レイアウトを使用したいと考えています。

ただし、ブートストラップはデザインタブでのみ機能します。次のスクリーンショットをご覧ください。

ここに画像の説明を入力

しかし、これは私がブラウザシミュレータで得たものです:

ここに画像の説明を入力

これは私の完全な（しかし非常に単純な）コードです：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>JakartaWikiMall</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/JakartaWikiMall.css">
    <script>
        window.$ = window.jQuery = WLJQ;
        $("#btnPromo").click(function(){
            $("#pagePort").load("pages/MainPage.html", function(){
                alert("loaded!");
            });
        });
    </script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none;">
    <!--application UI goes here-->
    <div data-role="page" id="pagePort">
        <div data-role="content">
            <div class="span9">
                <div class="row-fluid">
                    <div class="span1">test1</div>
                    <div class="span1">test2</div>
                    <div class="span1">test3</div>
                </div>
                <div class="row-fluid">
                    <div class="span1">test4</div>
                    <div class="span1">test5</div>
                    <div class="span1">test6</div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/initOptions.js"></script>
    <script src="js/JakartaWikiMall.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

ブートストラップを機能させるには?

何か助けが必要な場合はお知らせください。お時間をいただきありがとうございます:D

4

1 に答える 1