ui-responsive grid 将列包装成行 jQuery mobile

Question

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

我使用的代码是

<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-responsive 类添加了一个最大宽度为 560 像素的 CSS 媒体查询。因此，只要屏幕小于 560px，列就会被堆叠。如果您想要自己的自定义断点，而不是 ui 响应式，请创建自己的类名并设置所需的断点。

例如，如果您希望仅在屏幕宽度低于 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/