1

编辑================================================== ==============================

Nick R说，由于响应式设计，它无法正常工作，而且它是真的。在我将 css 更改为默认（无响应）后，一切正常。

但是，我有一个新问题：

这段话摘自 bootstrap 官网：

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

那么，这是否意味着row-fluid该类已经响应（适应屏幕尺寸）所以我不需要使用响应式 css？

感谢：D

编辑================================================== ==============================

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

但是，引导程序仅在设计选项卡中工作。请看下面的截图：

在此处输入图像描述

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

在此处输入图像描述

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

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

0

你的 HTML 标记是错误的，你缺少.containeror.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>

在这里看小提琴

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

于 2014-09-25T17:23:27.527 回答