0

尝试创建一个支持移动屏幕的响应式网格。使用 jQuery 移动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保留在下一行。

4

1 回答 1

0

jQM 中的 ui-responsive 类添加了一个最大宽度为 560px 的 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;
    }
}

演示

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

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

于 2015-03-18T14:06:53.830 回答