css - Bootstrap Checkbox 未与标签对齐,在移动设备上更糟
问题描述
我无法让控件标签排列复选框输入。在手机上更糟糕。我希望文字排成一行。我究竟做错了什么?我认为缺少一个 div 或其他东西,但它适用于任何其他输入。我尝试使用 css 调整边距,但现在也可以使用。任何帮助,将不胜感激。这是代码:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><a href="forgot_password"><!--?php echo lang('login_forgot_password');?--></a></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
解决方案
您可以添加一些 CSS 样式来控制.checkbox-inline
媒体查询将移动较小屏幕的复选框。
另请注意,我将课程添加.form-small
到您的最后一个.form-group
以控制复选框在较小屏幕上的位置。
.checkbox-inline {
top: -7px;
}
@media only screen and (max-width: 991px) {
.checkbox-inline {
top: -40px;
right: -115px;
}
.form-small {
margin-bottom: 0 !important;
max-height: 20px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group form-small">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><a href="forgot_password"><!--?php echo lang('login_forgot_password');?--></a></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
推荐阅读
- spring - 什么类实现了spring框架Autowired
- reactjs - 如何在 React 或 Vue 中的表格内构建组件渲染多行
- clips - CLIPS(templates) - 家庭关系:在编写规则时处理模板和初始事实的麻烦
- c# - 在 Unity 中始终如一地将角色推向一个方向
- hive - Hive 表(orc 类型)指向的 ORC 文件是否应该包含 hive 表中的所有属性?
- python-3.x - 在 Pandas 数据框中使用过滤器过滤行
- c# - c# StackFrame.GetILOffset()
- angular - 我应该总是使用 ChangeDetectionStrategy.OnPush
- jquery - 输入/数据列表自动完成不显示
- python - 在 PySpark 中将 2D 矩阵 - 数据框转换为平面表