Question

我使用Bootstrap 3.0.3创建了一个登录框。在第二行，密码输入框和复选框“s（标记为Auth）高度不同。在移动设备上，差异更加明显。

如何才能使他们的高度匹配？

<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" role="form" class="form-inline">
<div id="outlogin_box" name="outlogin_box">
<input type="hidden" name="url" value="<?=$outlogin_url?>">
<input type="text" class="form-control input-sm" name="mb_id" maxlength="20" itemname="id" placeholder="login id">
<div class="input-group"><!-- needs height alignment -->
    <input type="password" class="form-control input-sm" name="mb_password" id="outlogin_mb_password" maxlength="20" itemname="password" placeholder="password">
    <span class="input-group-addon">
        <div class="checkbox">
        <label>
        <input type="checkbox" name="auto_login" title="Remember me" value="1" onclick="if (this.checked) { if (confirm('자동로그인을 사용하시면 다음부터 회원아이디와 패스워드를 입력하실 필요가 없습니다.\n\n\공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?')) { this.checked = true; } else { this.checked = false; } }">
        Auto
        </label>
        </div>
    </span>
</div>
<div class="input-group">
    <button type="submit" class="btn btn-success btn-sm btn-group-justified" >Login</button>
</div>
<div class="input-group">
    <div class="btn-group btn-group-justified">
        <a class="btn btn-default btn-sm" title="Register" href="<?=$g4[bbs_path]?>/register.php">Register</a>
        <a class="btn btn-default btn-sm" title="회원 id, password 찾기" href="javascript:win_password_lost();">아이디찾기</a>
    </div>
</div>
</div>
</form>

Answer 1

更改

<input class="form-control input-sm" name="mb_password" ...

到

<input class="form-control" name="mb_password" ...

http://www.bootply.com/98872

您已通过添加“input-sm”类来修改输入的高度。

Answer 2

试试这个非常简单：

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
  }
  input[type=radio] {
    bottom: 2px;
  }

Answer 3

您可以通过执行以下操作为CSS中的HTML文本框/复选框设置固定的宽度和高度值...

input[type="text"] {
    width: 10%;
    height:3%;
}
input[type="password"] {
    width: 10%;
    height:3%;
}
input[type="checkbox"] {
    height:2%;
}

您也可以使用px而不是百分比来设置它们。希望设置固定的高度和宽度可以解决您的大小问题。

Answer 4

尝试使用覆盖bootstrap CSS ：

.input-group-addon .checkbox {
    margin: 8px 5px 0 !important;
}

.input-group-addon {
    padding:0 !important;
}

Answer 5

更改你的复选框类显示的css，显示：inline-block to display：inline and try it

.form-inline .radio，。form-inline .checkbox {display：inline-block; padding-left：0; margin-top：0; margin-bottom：0}

到

.form-inline .radio，。form-inline .checkbox {display：inline; padding-left：0; margin-top：0; margin-bottom：0}

在bootstrap.min.css

中

输入框和复选框的高度不同

5 个答案: