Question

修改=========================================== ===================================

Nick R说它因为响应式设计而无法工作，而且它是真的。在将css更改为默认值（无响应）后，事情正在发挥作用。

但是，我有一个新问题：

此引用来自bootstrap官方网站：

流体网格系统使用百分比而不是列的像素宽度。它具有与固定网格相同的响应能力系统，确保关键屏幕分辨率的适当比例和设备

那么，是否意味着row-fluid类已经响应（适应屏幕大小），所以我不需要使用响应式CSS？

谢谢：D

修改=========================================== ===================================

我尝试在我的项目中实现bootstrap库，我想使用它的响应式布局。

但是，bootsrap只能在设计标签中使用。请看下面的截图：

enter image description here

然而，这是我在浏览器模拟器中得到的：

enter image description here

这是我的完整（但非常简单）代码：

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

如何让bootstrap工作？

感谢任何帮助，如果您需要什么，请告诉我并感谢您的时间：D

Answer 1

您的HTML标记错误，您缺少.container或.container-fluid类，您必须牢记Bootstrap网格系统。思考"I want 3 columns so the sum has to be 1+1+1"是一个常见的混乱，但事实上Bootstrap使用12网格系统（除非自定义），因此对于3个相等宽度的列，就像你的情况一样，你需要 4 + 4 + 4 。因此，您的代码应如下所示：

<div data-role="page" id="pagePort">
    <div data-role="content">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span4">test1</div>
                <div class="span4">test2</div>
                <div class="span4">test3</div>
            </div>
            <div class="row-fluid">
                <div class="span4">test4</div>
                <div class="span4">test5</div>
                <div class="span4">test6</div>
            </div>
        </div>
    </div>
</div>

See fiddle here

注意：我意识到这是一个老问题，但是在我的第一页显示，所以请问它，以防某人仍然需要答案

响应式引导程序无法正常工作

1 个答案: