时间戳

首页 > 解决方案 > 让单选按钮以较小的分辨率重新对齐

html - 让单选按钮以较小的分辨率重新对齐

问题描述

当页面缩小到较小的尺寸（<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>

标签： htmlcss

解决方案

您可以在此处使用媒体查询，当屏幕尺寸低于 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>

推荐阅读