自举(http://bootply.com/98907

使用chrome / mobile视图(小宽度视图),
“身份验证”复选框的高度更改为高。

验证复选框的高度必须相同。

<form name="fhead" class="form-inline" role="form" onsubmit="return fhead_submit(this);" method="post" autocomplete="off">
<div id="outlogin_box" name="outlogin_box">
<input name="url" type="hidden" value="%2F">
<input name="mb_id" class="form-control" type="text" maxlength="20" placeholder="login id" itemname="아이디">
<div class="input-group">
    <input name="mb_password" class="form-control" id="outlogin_mb_password" type="password" maxlength="20" placeholder="password" itemname="password">
    <span class="input-group-addon">
        <div class="checkbox">
        <label>
        <input name="auto_login" title="Remember me" onclick="if (this.checked) { if (confirm('Using Auth?')) { this.checked = true; } else { this.checked = false; } }" type="checkbox" value="1">
        Auth
        </label>
        </div>
    </span>
</div>
<button class="btn btn-default btn-group-justified" type="submit">Login</button>
<div class="input-group">
    <div class="btn-group btn-group-justified">
        <a title="회원가입" class="btn btn-default" href="./bbs/register.php">회원가입</a>
        <a title="회원 id, password 찾기" class="btn btn-default" href="javascript:win_password_lost();">아이디찾기</a>
    </div>
</div>
</div>
</form>

最佳答案

我已经检查了您的代码,并设置了媒体查询:

@media (min-width: 768px){ .form-inline .radio, .form-inline .checkbox { display: inline-block; padding-left: 0; margin-top: 0; margin-bottom: 0; } }


因此,当宽度小于768px时,它将更改css,它将删除该媒体查询,并为该元素提供空白,如下所示:

.radio, .checkbox { display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px; vertical-align: middle; }


因此,您应该更改该媒体查询宽度,或进行新的媒体查询。
我希望我能提供帮助,并且我正确理解了您的问题

09-30 14:29
查看更多