屏幕较小时，如何将单选按钮组控件更改为垂直？
[英]How can I change the radio button group control to vertically when screen is smaller?
问题描述
我正在创建一个调查应用程序，每个问题都有很多选择。 该应用程序使用的XPages中的Radio单选按钮组控件设置为水平。
我的问题是，当屏幕较小时，所有选择都不能同时显示（也就是多语言），因此在较小的屏幕中，我需要从水平更改为垂直。
查看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
5 个解决方案
解决方案1
2 2015-11-18 10:02:08
普通的HTML方法无法满足您的需求。 但一种选择可能是根据您的选择使用重复控件。 重复项的<ul>和</ul>元素可以具有页眉和页脚构面。 重复中的每个元素可以是<li> ，一个单选按钮，其相关条目绑定到后端字段，再加上</li> 。 然后，CSS将允许基于@media设置来样式化列表。
如果我没记错的话，可以使用XPages单选按钮控件定义单选按钮所属的组，以便仍然只能选择一个。
解决方案2
1 2015-11-18 09:51:24
如何将单选按钮转换为列出并使用媒体查询来完成工作。
<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>
解决方案3
1 2015-11-18 09:54:15
是的，使用媒体查询
@media screen and (min-width: 480px) {
.input{display: inline-block}
}
此处的示例： http : //jsfiddle.net/d1oL5Lpp/1/
解决方案4
1 2015-11-18 10:00:22
第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代码的<head> <style>标记之间查找<style>标记。 如果找不到标签，请添加以下代码：
<style type=”text/css”> </style>
所有CSS代码都在<style>标记之间。 每个网页应只包含一组这些标签。
第三步
为<label>标签编写样式规则。 将“显示”属性设置为“块”并添加宽度：
label { display: block; width: 150px; }
第四步
使用“类型”选择器定位所有单选按钮。 浮动右侧的单选按钮，使其在标签右侧对齐：
input[type='radio'] { float: right; }
解决方案5
0 2015-11-19 11:03:29
我相信所有答案都是正确的。 但是，如果您问我的选择，那么我将简单地将2个单选按钮组链接到同一元素，并仅根据设备大小（在CSS中使用媒体查询）隐藏一次。
不要以为这里没有任何代码，但是请告诉我，它将随后进行相应的更新。
如何在HTML表单中创建两组单选按钮，并且当A组中的更改将在B组中更改时？
[英]How can I create two groups of radio buttons in a HTML form and when change in A Group will change in B Group?
如何通过选择特定的单选按钮组来重置多个单选按钮组
[英]How can I reset many radio button groups by selecting a specific radio button group
"我可以有一个只有一个单选按钮的单选按钮组，并且它仍然可以用作单选按钮组吗？"
[英]Can I have a radio button group with only one radio button, and have it still function as a radio button group?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.