Question

我正在创建一个调查应用程序，每个问题都有很多选择。应用程序正在使用设置为水平的XPage中的单选按钮组控件。

我的问题是，当屏幕较小时，所有选项都不适合一行（也是多语言），所以我需要在较小的屏幕中从水平变为垂直。

查看用于水平单选按钮控件的HTML，它包含在一个表行中，而垂直一个是每个选项的一个表行。

我该如何解决这个问题。是否可以根据屏幕大小更改单选按钮组服务器端的方向，还是可以通过某些客户端javascript / jquery或使用CSS中的媒体查询轻松解决？

解决方案必须根据屏幕尺寸更改布局，而不是基于设备。

这是垂直布局的HTML

<div id="view:_id1:radioGroup3" class="radio">
<table role="presentation">
    <tbody><tr>
<td>
<label for="view:_id1:radioGroup3:0"><input type="radio" id="view:_id1:radioGroup3:0" name="view:_id1:radioGroup3" value="Good">Good</label></td>
    </tr>
    <tr>
<td>
<label for="view:_id1:radioGroup3:1"><input type="radio" id="view:_id1:radioGroup3:1" name="view:_id1:radioGroup3" value="Bad">Bad</label></td>
    </tr>
</tbody></table></div>

这是水平布局的HTML

<div id="view:_id1:radioGroup1" class="radio">
<table role="presentation">
<tbody><tr>
<td>
<label for="view:_id1:radioGroup1:0"><input type="radio" id="view:_id1:radioGroup1:0" name="view:_id1:radioGroup1" value="Good">Good</label></td>
<td>
<label for="view:_id1:radioGroup1:1"><input type="radio" id="view:_id1:radioGroup1:1" name="view:_id1:radioGroup1" value="Bad">Bad</label></td>
</tr>
</tbody></table></div>

我正在使用Bootstrap

Answer 1

纯HTML方法不会做你想要的。但一个选项可能是根据您的选项使用重复控制。重复可以包含<ul>和</ul>元素的页眉和页脚构面。重复中的每个元素都可以是<li>，一个单选按钮，其后面的相关条目绑定到后端字段，加上</li>。然后，CSS将允许基于@media设置为列表设置样式。

如果我没记错的话，XPages单选按钮控件允许您定义单选按钮所属的组，以便仍然只能选择一个。

Answer 2

如何将单选按钮转换为列表并使用媒体查询来完成工作..

<html>
    <head>
        <style>
            ul li{

            }

            @media only screen and (min-width: 500px) {
                ul li {
                    display:inline;
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li><input type="radio"> radio1</input></li>
            <li><input type="radio"> radio2</input></li>
            <li><input type="radio"> radio3</input></li>
            <li><input type="radio"> radio4</input></li>
        </ul>
    </body>

</html>

Answer 3

是的，使用媒体查询

@media screen and (min-width: 480px) {
 .input{display: inline-block}   
}

示例：http://jsfiddle.net/d1oL5Lpp/1/

Answer 4

第1步

将每个单选按钮标记及其标签文本换行到<label>标记：

<label>Radio One: <input type="radio" name="myradio" value="one" /></label>
<label>Radio Two: <input type="radio" name="myradio" value="two" /></label>

将文本和输入放在<label>标记内时，可以使文本可单击。点击“Radio One”将选择第一个单选按钮，例如。

第2步

在HTML代码的<style>标记之间查找<head>标记。如果找不到标记，请添加此代码：

<style type=”text/css”> </style>

所有CSS代码都在<style>代码之间。每个网页应该只有一组这些标签。

第3步

为<label>标记编写样式规则。将“display”属性设置为“block”并添加宽度：

label { display: block; width: 150px; }

第4步

使用“type”选择器定位所有单选按钮。将单选按钮浮动到右侧，将它们排列到标签的右侧：

input[type='radio'] { float: right; }

Answer 5

我相信所有答案都是正确的。但是，如果你问我的选择，那么我只需要将2个单选按钮组链接到同一个元素，然后根据设备大小（css中的媒体查询）进行隐藏。

不要认为这里有任何代码，但请告知我们，然后会相应更新。

当屏幕较小时，如何将单选按钮组控件更改为垂直？

5 个答案: