フィールドの幅がデスクトップにある場合のJQueryMobileのラジオボタン

Question

ラジオボタンが4つ横になっていて、320X300px（スマートフォン）で見栄えがよく見えますが、デスクトップやタブレットでうまく見えます。凡例のテキストを幅広くするか、またはすべて2列に収めるにはどうすればよいですか。私はグリッドを使用しようとしましたが、それは何もしないようです。私はちょうどいくつかのCSSが必要だと思うが、私は何をすべきか分からない。

<div data-role="fieldcontain" > 
<fieldset data-role="controlgroup" data-type="horizontal" data-ajax="true" class="row_b" > 
<legend>This is a long question that gets wrapped around in a small space on a desktop but it would be great if it occupied more of the wasted space on the right.</legend> 
<input type="radio" name="q2" title="Did not apply to me at all" id="q2_0" value="0" /> 
<label for="q2_0" style="width: 65px;">0</label> 
<input type="radio" name="q2" title="Applied to me to some degree, or some of the time" id="q2_1" value="1" /> 
<label for="q2_1" style="width: 65px;">1</label> 
<input type="radio" name="q2" title="Applied to me to a considerable degree, or a good part of time" id="q2_2" value="2" /> 
<label for="q2_2" style="width: 65px;">2</label> 
<input type="radio" name="q2" title="Applied to me very much, or most of the time" id="q2_3" value="3" /> 
<label for="q2_3" style="width: 65px;">3</label> 
</fieldset> 
</div> 

Answer 1

列の代わりに2つの行を試すことができます。

デモ：http://jsfiddle.net/6rCmY/1

私はlegendを取り除き、fieldsetの外にテキストを移動し、.row_b

.row_b .ui-btn { 
    text-align: center; 
    width: 24.5%; 
} 

それとも、テキストを動かすの子として.ui-btnクラスのデフォルトのCSSをオーバーライドCSSを変更しないでください。

デモ：http://jsfiddle.net/GsUEz/1/