0

モバイル画面をサポートするレスポンシブ グリッドを作成しようとしています。jQuery モバイルui-responsiveグリッドを使用すると、最初の行に 2 番目の列に対応するスペースがある場合でも、列が折り返されて行 (1 つ下に 1 つ) のように動作します。タブレット サイズの画面で同じことをテストすると、問題なく動作します。どこが間違っているのか、これがどのように動作するのか?

私が使用したコードは

<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 レスポンシブではなく、独自のカスタム ブレーク ポイントが必要な場合は、独自のクラス名を作成し、目的のブレーク ポイントを設定します。

たとえば、画面幅が 300px 未満の場合にのみスタックを発生させたい場合は、次のようにします。

<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 に答える