モバイル画面をサポートするレスポンシブ グリッドを作成しようとしています。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
次の行に残ります。