ui-响应式网格将列换行 jQuery 移动

Question

正在尝试创建支持移动屏幕的响应式网格。当使用 jQuery 移动 ui-responsive 网格时，该列换行并表现得像行（一个在一个下面），即使第一行有 space 容纳第二列。如果我在平板电脑尺寸的屏幕上进行相同的测试，一切正常。我在哪里错了或者这是它的行为方式？

我使用的代码是

<div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <a href="#" id="link_frgt_pswd" data-inline="true" >Forgot Password ?</a>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-submit" data-role="button" data-inline="true">Login</a>
                    </div>

                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Member </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="link_unlock_acc" data-inline="true" >Unlock Account</a>
                    </div>
                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Provider </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-provider" data-role="button" data-inline="true">Register</a>
                    </div>
                </div>

我什至尝试使用 css .ui-grid-a .ui-block-a { width: 30% } .ui-grid-a .ui-block-b { width: 30% } 来减小列的宽度。它减少了宽度，但仍然 ui-block-b 保留在下一行中。

Answer 1

jQM 中的 ui 响应式 class 添加了一个 CSS 媒体查询，最大宽度为 560px。所以只要屏幕小于 560px，列就会堆叠起来。如果您想要自己的自定义断点，而不是 ui-responsive，请创建您自己的 class 名称并设置您想要的断点。

例如，如果您希望仅当屏幕宽度低于 300 像素时才发生堆叠：

<div class="ui-grid-a my-breakpoint">...</div>

@media all and (max-width: 300px) {
    .my-breakpoint .ui-block-a,
    .my-breakpoint .ui-block-b,
    .my-breakpoint .ui-block-c,
    .my-breakpoint .ui-block-d,
    .my-breakpoint .ui-block-e {
        width: 100%;
        float: none;
    }
}

DEMO

您还可以从 jQM 站点查看此演示：

http://demos.jquerymobile.com/1.4.5/grids-custom-responsive/