使单选按钮以较小的分辨率重新对齐

Question

我试图让这些单选按钮和文本框移动到一条垂直线，当页面缩小到一个较小的尺寸(<600)。现在它们是水平显示的

<div >
<div class="col-sm-4 col-lg-8" style="width:100%">
<input type="radio" class="gender" value="Male" @required>
<label for="MALE">Male</label>
<input type="radio" class="gender" value="Female">
<label for="FEMALE">Female</label>
<input type="radio" class="gender" value="Prefer not to say">
<label for="PREFERNOTTOSAY"> Prefer not to say </label>
<input type="radio" class="gender" value="Other">
<label for="OTHER"> Other (please specify) </label>
<input type="text" class="form-control c-form__input" value="">
</div>
</div>
</div>

Answer 1

你可以在这里使用媒体查询，当屏幕尺寸低于600时，让你的输入字段100%宽度

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
input {
width: 100%
}
}

<div>
<div class="col-sm-4 col-lg-8" style="width:100%">
<input type="radio" class="gender" value="Male" @required>
<label for="MALE">Male</label>
<input type="radio" class="gender" value="Female">
<label for="FEMALE">Female</label>
<input type="radio" class="gender" value="Prefer not to say">
<label for="PREFERNOTTOSAY"> Prefer not to say </label>
<input type="radio" class="gender" value="Other">
<label for="OTHER"> Other (please specify) </label>
<input type="text" class="form-control c-form__input" value="">
</div>
</div>
</div>

Answer 2

看看我刚刚创建的这个小提琴:https://jsfiddle.net/Ghazi360/rz0p3dae/3/

我做了什么?

@media only screen and (max-width: 600px) {
input {
width: 100%
}
}

当屏幕尺寸小于600px时，添加这个媒体查询来将输入字段的大小调整为100%，效果会很好。