我最近一直在使用jQuery Mobile，并开始遇到各种限制;其中大部分我可以使用某种jQuery/Javascript/CSS操作来解决。我们使用了很多iPad，它允许比典型手机更大的宽度。我们页面上的某些输入组在两列格式下往往看起来更好;如果可能的话。
例如，一长串单选按钮。它只在一列中看起来很糟糕。我们希望以 2 或 3 列显示单选按钮列表，而不是使用单个"垂直"控制组"获得的典型 1 列格式。请参阅此演示页面上的垂直控制组：
http://demos.jquerymobile.com/1.4.5/checkboxradio-radio/#Verticalgroup
使用复选框，我通过创建两个或三个不同的控制组，然后将它们放入 3 列网格中来实现这一点。这适用于复选框，但我不确定如何使用单选按钮执行此操作。有什么想法吗？
我假设我可以创建三个不同的无线电输入垂直控制组（并排），然后操作 CSS，使其看起来像一个组。我必须管理实际所选收音机的隐藏输入。
我决定为营销来源创建两列：右和左。名称是"marketing_source_left"和"marketing_source_right"。我填充两个无线电垂直控制组，然后使用 jQuery 将这两个组更改为仅具有"marketing_source"的"name"属性。
// Define current marketing_source value and remove hidden field
var marketing_source = $('#marketing_form #marketing_source').val(); // hidden field
$('#marketing_form #marketing_source').val(marketing_source).remove();
// Change all marketing source radios (left and right sides)
// to have property name="marketing_source"
$("#marketing_form input:radio[name='marketing_source_left']").prop('name', 'marketing_source').prop('checked', false);
$("#marketing_form input:radio[name='marketing_source_right']").prop('name', 'marketing_source').prop('checked', false);
// Set the radio to checked for the marketing source value
$('#marketing_form input[type="radio"]:checked').prop('checked', false); // Uncheck current
$('#marketing_form input:radio[name="marketing_source"]').filter('[value="'+marketing_source+'"]').prop('checked', true);
$('#marketing_form input:radio[name="marketing_source"]').checkboxradio('refresh');
使用的CSS与此类似。
#marketing_right_div, #marketing_left_div {
display: inline-block !important;
width: 314px !important;
text-align: top;
vertical-align: top;
}