我是bootstrap学习的初学者,并希望在bootstrap中对齐这些元素。当我没有添加任何图标时,它运行良好。但是如果我添加任何输入字段的任何图标,那么对齐会像下面给出的图一样被破坏。
这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leave Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body style="background-color:#584F39;">
<div class="container">
<div class="panel-group">
<div class="panel panel-primary" style="border-color: #73AD21; ">
<div class="panel-heading" style=" background-color:#73AD21;">
<h3 class="panel-title" style="text-align: center;">Leave Form</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="eid">Employee ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="eid" placeholder="Enter ID">
</div>
</div>
<div class="panel panel-primary " style="border-color: #73AD21; margin-bottom: 15px;">
<div class="panel-heading" style=" background-color:#73AD21;">
<h3 class="panel-title" style="text-align: center;">Employee Information
<span class=" glyphicon glyphicon-user" aria-hidden="true"></span>
</h3>
</div>
<div class="panel-body ">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2" for="name" > Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<label class="control-label col-sm-2" for="designation" >Designation:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="designation" placeholder="Designation">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="department" > Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="department" placeholder="Department">
</div>
<label class="control-label col-sm-2" for="sd" >Sec/Division:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="sd" placeholder="Section/Division">
</div>
</div>
</div>
</div>
</div>
<div class="form-group" >
<div class="form-group" >
<label class="control-label col-sm-3" style=" text-align:right;" >Leave Type:</label>
<div class="col-sm-9 ">
<select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
<option value="" disabled="" selected="">Select Leave Type</option>
<option value="10">Sick Leave</option>
<option value="10">Study Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >From Date:</label>
<div class="col-sm-9 input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY" >
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >To Date:</label>
<div class="col-sm-9 input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY" >
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Leave Place:</label>
<div class="col-sm-9 ">
<input type="text" class="form-control" id="lp" placeholder="Place Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Contact Email:</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Phone:</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
给我一些关于如何正确对齐,间隙等正确处理此图标的线索。 如需了解更多信息,请通知我。
答案 0 :(得分:1)
输入组:不要与其他组件混合
不要将表单组或网格列类直接与输入混合使用 组。而是将输入组嵌套在表单组或内部 与网格相关的元素。
因为您要将输入组与列混合,请参阅Docs和正在运行的代码段。
body {
background-color: #584F39;
}
.panel.panel-primary {
border-color: #73AD21;
}
.panel-group .panel .panel-heading {
background: #73AD21;
}
.form-horizontal .panel.panel-primary {
border-color: #73AD21;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.form-group-top {
margin-top: 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Leave Form</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="eid">Employee ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="eid" placeholder="Enter ID">
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Employee Information <span class=" glyphicon glyphicon-user" aria-hidden="true"></span> </h3>
</div>
<div class="panel-body ">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group-top">
<label class="control-label col-sm-2" for="designation">Designation:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="designation" placeholder="Designation">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="department">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="department" placeholder="Department">
</div>
<div class="form-group-top">
<label class="control-label col-sm-2" for="sd">Sec/Division:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="sd" placeholder="Section/Division">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style=" text-align:right;">Leave Type:</label>
<div class="col-sm-9 ">
<select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
<option value="" disabled="" selected="">Select Leave Type</option>
<option value="10">Sick Leave</option>
<option value="10">Study Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">From Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">To Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Leave Place:</label>
<div class="col-sm-9 ">
<input type="text" class="form-control" id="lp" placeholder="Place Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Contact Email:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Phone:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
所有关于对齐和间距(边距和填充)。 例如。在“从日期:”行中,你有“”和“输入组”的css使“padding-left:0”因为它的对齐方式不同。 您可以在Mozilla中使用Firebug插件来查看和更改浏览器本身的CSS。
此致 Krish