Question

基本上我有2个具有相同的单选按钮。第一个用于桌面视图，第二个用于移动视图，我根据媒体大小使用媒体查询隐藏。

问题我的第一个div检查功能是在桌面视图上工作但是当它改为移动视图时它不起作用？

            <div class="gen-div">
                <div class="form-group gen-label">
                    <label class="col-sm-12 lab" for="id_gender">Gender *</label>
                </div>
                <div class="form-group gen-div-margin">
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="male" checked/> <label>Male</label></div>
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="female"/> <label>Female</label></div>
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="other"/> <label>Other</label></div>
                </div>
            </div>

            <div class="form-group gen-div1">
                <label class="col-sm-2 lab" for='id_gender'>Gender *</label>
                <div class="col-sm-2" style="padding:12px;">
                    <input type="radio" name="gender" value="male" checked/> <label>Male</label>
                </div>
                <div class="col-sm-2 " style="padding:12px;">
                    <input type="radio" name="gender" value="female"/> <label>Female</label>
                </div>
                <div class="col-sm-2" style="padding:12px;">
                    <input type="radio" name="gender" value="other"/> <label>Other</label>
                </div>
            </div>

gen-div 适用于桌面视图和 gen-div1 适用于移动设备视图

我知道这是基本问题，但我需要帮助!!!

这是我的CSS

.gen-div{display:none;}
 .gen-div1{display:block;}

@media only screen and (max-width: 750px)
 {
.gen-div{display:block;} .gen-div1{display:none;}}

Answer 1

gen-div 用于桌面视图， gen-div1 用于移动视图

您有移动视图的 .gen-div1 和桌面视图的 .gen-div ，但您的CSS意味着您混合了它们。更改CSS或更改HTML中的类：

.gen-div {display:none;} // used for desktop but hidden by default
.gen-div1 {display:block;} // used for mobile but shown by default

@media only screen and (max-width: 750px) { // mobile media query
    .gen-div {display:block;} // used for desktop shown when on mobile
    .gen-div1 {display:none;} // used for mobile hidden when on mobile
}

应该是：

.gen-div {display:block;} // used for desktop shown by default
.gen-div1 {display:none;} // used for mobile hidden by default

@media only screen and (max-width: 750px) { // mobile media query
    .gen-div {display:none;} // used for desktop hidden when on mobile
    .gen-div1 {display:block;} // used for mobile shown when on mobile
}

Answer 2

.gen-div {display:block;} // used for desktop shown by default
.gen-div1 {display:none;} // used for mobile hidden by default

@media only screen and (max-width: 750px) { // mobile media query
.gen-div {display:none;} // used for desktop hidden when on mobile
.gen-div1 {display:block;} // used for mobile shown when on mobile   
}

当我使用媒体查询时，Html单选按钮检查功能不？

2 个答案: