我设计了一个页面，我不需要侧栏需要删除它，我需要在中心放置一个面板
当我将鼠标悬停在每个标签上时，我在面板标题处设计了标签，鼠标颜色不适合所有标签下方的行
鼠标悬停在每个标签名称上都有一些背景颜色我需要避免
作为我开发的初学者，请提出建议以清除这一点
https://jsfiddle.net/ym3yk38m/4/
.nav-tabs { border-bottom: 6px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:focus {border: none;background:#f8f8f8; } .nav-tabs > li.active > a:hover { border-width: 0;background:#f8f8f8;}
.nav-tabs > li > a { border: none; color: #666; padding:10px 95px; width:500px; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;background:#f8f8f8; }
.nav-tabs > li > a::after { content: ""; background: #00a8a8; height: 7px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<!--bootstrapValidator-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">
<b>Student Self Enrollment</b>
</h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" role="tablist">
<li class="col-lg-4 role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Personal Info</a></li>
<li class="col-lg-4 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
<li class="col-lg-4 role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Previous Educational Info</a></li>
</ul>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body">
<form class="form-horizontal" method="post">
<div class="tab-content">
<!--Personal info tab div -->
<div role="tabpanel" class="tab-pane active" id="home">
<h3 style="color: red">Student Details</h3>
<div class="form-group">
<label class="col-xs-2 control-label">Student Name</label>
<!--<div class="group">-->
<div class="col-xs-3">
<input name="student.studentFirstName" type="text" class="form-control" id="studentFirstName" placeholder="First Name" />
</div>
<div class="col-xs-3">
<input name="student.studentMiddleName" type="text" class="form-control" id="studentMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="student.studentLastName" type="text" class="form-control" id="studentLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Date-of-birth</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="studentDOB">
<input name="student.studentDOB" type="text" class="form-control" placeholder="Date-Of-Birth" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-3">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="optradio">Male</label>
<label class="btn btn-default">
<input type="radio" name="optradio">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Place of Birth </label>
<div class="col-xs-3">
<input name="student.studentBirthPlace" type="text" class="form-control" id="studentBirthPlace" placeholder="Place of Birth" />
</div>
<label class="col-xs-3 control-label">Mother Toungue</label>
<div class="col-xs-3">
<input name="student.studentMotherTounge" type="text" class="form-control" id="studentMotherTounge" placeholder="Mother Toungue" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Blood Group </label>
<div class="col-xs-3">
<input name="student.studentBloodGroup" type="text" class="form-control" id="studentBloodGroup" placeholder="Blood Group" />
</div>
<label class="col-xs-3 control-label">Class Name</label>
<div class="col-xs-3">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Image</label>
<div class="col-xs-9">
<input type="file" class="form-control" name="student.studentImage"/>
</div>
</div>
<h3 style="color: red">Parent Details</h3>
<div class="form-group">
<label class="col-xs-2 control-label">Father Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.fatherFirstName" type="text" class="form-control" id="fatherFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.fatherMiddleName" type="text" class="form-control" id="fatherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.fatherLastName" type="text" class="form-control" id="fatherLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Mother Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.motherFirstName" type="text" class="form-control" id="motherFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.motherMiddleName" type="text" class="form-control" id="motherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.motherLastName" type="text" class="form-control" id="motherLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Gaurdian Name</label>
<div class="group">
<div class="col-xs-3">
<input name="parent.gaurdianFirstName" type="text" class="form-control" id="gaurdianFirstName" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input name="parent.gaurdianMiddleName" type="text" class="form-control" id="gaurdianMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input name="parent.gaurdianLastName" type="text" class="form-control" id="gaurdianLastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Occupation</label>
<div class="col-xs-9">
<input name="parent.occupation" type="text" class="form-control" id="occupation" placeholder="Occupation" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Qualification</label>
<div class="col-xs-3">
<input name="parent.qualification" type="text" class="form-control" id="qualification" placeholder="Qualification" />
</div>
<label class="col-xs-3 control-label">Income</label>
<div class="col-xs-3">
<input name="parent.income" type="text" class="form-control" id="income" placeholder="Income" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Nationality</label>
<div class="col-xs-3">
<input name="student.nationality" type="text" class="form-control" id="nationality" placeholder="Ex: Indian"/>
</div>
<label class="col-xs-3 control-label">Religion</label>
<div class="col-xs-3">
<input name="student.religion" type="text" class="form-control" id="religion" placeholder="EX: Hindhu Muslim..."/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Caste</label>
<div class="col-xs-3">
<input name="student.caste" type="text" class="form-control" id="caste" placeholder="Ex:Okkaliga,Lingayath"/>
</div>
<label class="col-xs-3 control-label">Category</label>
<div class="col-xs-3">
<input name="student.category" type="text" class="form-control" id="category" placeholder="Ex:3a,2a...."/>
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="button" class="btn btn-primary">Next</button>
</div>
</div>
</div>
<!--Contact info tab div -->
<div role="tabpanel" class="tab-pane" id="profile">
<div class="form-group">
<label class="col-xs-2 control-label">Phone Number</label>
<div class="col-xs-3">
<input name="parent.phoneNumber" type="text" class="form-control" id="phoneNumber" placeholder="Phone Number"/>
</div>
<label class="col-xs-3 control-label">Emergency Contact</label>
<div class="col-xs-3">
<input name="parent.emergencyContact" type="text" class="form-control" id="emergencyContact" placeholder="Emergency Contact" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Email</label>
<div class="col-xs-9">
<input name="parent.emailID" type="text" class="form-control" id="email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Permanent Address</label>
<div class="col-xs-3">
<textarea class="form-control" name="student.permanentAddress" rows="5" cols="30" />
</div>
<label class="col-xs-3 control-label">Present Address</label>
<div class="col-xs-3">
<textarea class="form-control" name="student.presentAddress" rows="5" cols="30" />
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="button" class="btn btn-primary">Next</button>
</div>
</div>
</div>
<!--Previous Educational info tab div -->
<div role="tabpanel" class="tab-pane" id="messages">
<div class="form-group">
<label class="col-xs-2 control-label">School Name</label>
<div class="col-xs-9">
<input name="student.previousSchoolName" type="text" class="form-control" id="schoolName" placeholder="Previous School Name"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">From</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="from">
<input name="student.fromYear" type="text" class="form-control" id="from" placeholder="From Year"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<label class="col-xs-3 control-label">To</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="to">
<input name="student.toYear" type="text" class="form-control" id="to" placeholder="To Year"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Reason for Change</label>
<div class="col-xs-9">
<input name="student.reasonForChange" type="text" class="form-control" id="reasonForChange" placeholder="Reason for Change"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Tc Document</label>
<div class="col-xs-9">
<input type="file" class="form-control" name="student.tcDocument" />
</div>
</div>
<div class="form-group">
<label class="col-xs-11 control-label"></label>
<div class="col-xs-20 ">
<button type="Submit" class="btn btn-success">Finish</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /.form-body -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
答案 0 :(得分：2)
网页中心解决方案：
您的#page-wrapper元素的边距为250px，删除它会使元素居中：
#page-wrapper {
...
margin-right: 0;
...
}
标签溢出解决方案：
发生标签的溢出问题是因为您在以下规则中使用其子a元素设置了500px的宽度：
.nav-tabs > li > a {
...
width:500px;
}
在代码中，您有一个针对以下元素.nav>li>a的规则，并指定它们应显示为块元素，在这种情况下，您可以删除上面选择器的宽度，它应该修复溢出问题，因为默认情况下，块元素将占用其容器宽度的100％。
查看下面的工作演示：
#page-wrapper {
margin-left: 0 !important;
}
.nav-tabs {
border-bottom: 6px solid #DDD;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:focus {
border: none;
background: #f8f8f8;
}
.nav-tabs>li.active>a:hover {
border-width: 0;
background: #f8f8f8;
}
.nav-tabs>li>a {
border: none;
color: #666;
padding: 10px 95px;
/*width: 500px;*/
}
.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
border: none;
background: #f8f8f8;
}
.nav-tabs>li>a::after {
content: "";
background: #00a8a8;
height: 7px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
transform: scale(1);
}
.tab-nav>li>a::after {
background: #21527d none repeat scroll 0% 0%;
color: #fff;
}
.tab-pane {
padding: 15px 0;
}
.tab-content {
padding: 20px
}<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<!--bootstrapValidator-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">
<b>Student Self Enrollment</b>
</h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" role="tablist">
<li class="col-lg-4 role=" presentation " class="active "><a href="#home " aria-controls="home " role="tab " data-toggle="tab ">Personal Info</a></li>
<li class="col-lg-4 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
<li class="col-lg-4 role=" presentation "><a href="#messages " aria-controls="messages " role="tab " data-toggle="tab ">Previous Educational Info</a></li>
</ul>
</div>
<!-- /.panel-heading -->
<div class="panel-body ">
<div class="form-body ">
<form class="form-horizontal " method="post ">
<div class="tab-content ">
<!--Personal info tab div -->
<div role="tabpanel " class="tab-pane active " id="home ">
<h3 style="color: red ">Student Details</h3>
<div class="form-group ">
<label class="col-xs-2 control-label ">Student Name</label>
<!--<div class="group ">-->
<div class="col-xs-3 ">
<input name="student.studentFirstName " type="text " class="form-control " id="studentFirstName " placeholder="First Name " />
</div>
<div class="col-xs-3 ">
<input name="student.studentMiddleName " type="text " class="form-control " id="studentMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="student.studentLastName " type="text " class="form-control " id="studentLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Date-of-birth</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="studentDOB ">
<input name="student.studentDOB " type="text " class="form-control " placeholder="Date-Of-Birth " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
<label class="col-xs-3 control-label ">Gender</label>
<div class="col-xs-3 ">
<div class="btn-group " data-toggle="buttons ">
<label class="btn btn-default ">
<input type="radio " name="optradio ">Male</label>
<label class="btn btn-default ">
<input type="radio " name="optradio ">Female</label>
</div>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Place of Birth </label>
<div class="col-xs-3 ">
<input name="student.studentBirthPlace " type="text " class="form-control " id="studentBirthPlace " placeholder="Place of Birth " />
</div>
<label class="col-xs-3 control-label ">Mother Toungue</label>
<div class="col-xs-3 ">
<input name="student.studentMotherTounge " type="text " class="form-control " id="studentMotherTounge " placeholder="Mother Toungue " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Blood Group </label>
<div class="col-xs-3 ">
<input name="student.studentBloodGroup " type="text " class="form-control " id="studentBloodGroup " placeholder="Blood Group " />
</div>
<label class="col-xs-3 control-label ">Class Name</label>
<div class="col-xs-3 ">
<select class="form-control " id="sel1 ">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Image</label>
<div class="col-xs-9 ">
<input type="file " class="form-control " name="student.studentImage "/>
</div>
</div>
<h3 style="color: red ">Parent Details</h3>
<div class="form-group ">
<label class="col-xs-2 control-label ">Father Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.fatherFirstName " type="text " class="form-control " id="fatherFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.fatherMiddleName " type="text " class="form-control " id="fatherMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.fatherLastName " type="text " class="form-control " id="fatherLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Mother Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.motherFirstName " type="text " class="form-control " id="motherFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.motherMiddleName " type="text " class="form-control " id="motherMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.motherLastName " type="text " class="form-control " id="motherLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Gaurdian Name</label>
<div class="group ">
<div class="col-xs-3 ">
<input name="parent.gaurdianFirstName " type="text " class="form-control " id="gaurdianFirstName " placeholder="First name " />
</div>
</div>
<div class="col-xs-3 ">
<input name="parent.gaurdianMiddleName " type="text " class="form-control " id="gaurdianMiddleName " placeholder="Middle name " />
</div>
<div class="col-xs-3 ">
<input name="parent.gaurdianLastName " type="text " class="form-control " id="gaurdianLastName " placeholder="Last name " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Occupation</label>
<div class="col-xs-9 ">
<input name="parent.occupation " type="text " class="form-control " id="occupation " placeholder="Occupation " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Qualification</label>
<div class="col-xs-3 ">
<input name="parent.qualification " type="text " class="form-control " id="qualification " placeholder="Qualification " />
</div>
<label class="col-xs-3 control-label ">Income</label>
<div class="col-xs-3 ">
<input name="parent.income " type="text " class="form-control " id="income " placeholder="Income " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Nationality</label>
<div class="col-xs-3 ">
<input name="student.nationality " type="text " class="form-control " id="nationality " placeholder="Ex: Indian "/>
</div>
<label class="col-xs-3 control-label ">Religion</label>
<div class="col-xs-3 ">
<input name="student.religion " type="text " class="form-control " id="religion " placeholder="EX: Hindhu Muslim... "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Caste</label>
<div class="col-xs-3 ">
<input name="student.caste " type="text " class="form-control " id="caste " placeholder="Ex:Okkaliga,Lingayath "/>
</div>
<label class="col-xs-3 control-label ">Category</label>
<div class="col-xs-3 ">
<input name="student.category " type="text " class="form-control " id="category " placeholder="Ex:3a,2a.... "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="button " class="btn btn-primary ">Next</button>
</div>
</div>
</div>
<!--Contact info tab div -->
<div role="tabpanel " class="tab-pane " id="profile ">
<div class="form-group ">
<label class="col-xs-2 control-label ">Phone Number</label>
<div class="col-xs-3 ">
<input name="parent.phoneNumber " type="text " class="form-control " id="phoneNumber " placeholder="Phone Number "/>
</div>
<label class="col-xs-3 control-label ">Emergency Contact</label>
<div class="col-xs-3 ">
<input name="parent.emergencyContact " type="text " class="form-control " id="emergencyContact " placeholder="Emergency Contact " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Email</label>
<div class="col-xs-9 ">
<input name="parent.emailID " type="text " class="form-control " id="email " placeholder="Email "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Permanent Address</label>
<div class="col-xs-3 ">
<textarea class="form-control " name="student.permanentAddress " rows="5 " cols="30 " />
</div>
<label class="col-xs-3 control-label ">Present Address</label>
<div class="col-xs-3 ">
<textarea class="form-control " name="student.presentAddress " rows="5 " cols="30 " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="button " class="btn btn-primary ">Next</button>
</div>
</div>
</div>
<!--Previous Educational info tab div -->
<div role="tabpanel " class="tab-pane " id="messages ">
<div class="form-group ">
<label class="col-xs-2 control-label ">School Name</label>
<div class="col-xs-9 ">
<input name="student.previousSchoolName " type="text " class="form-control " id="schoolName " placeholder="Previous School Name "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">From</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="from ">
<input name="student.fromYear " type="text " class="form-control " id="from " placeholder="From Year "/>
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
<label class="col-xs-3 control-label ">To</label>
<div class="col-xs-3 ">
<div class="input-group input-append date " id="to ">
<input name="student.toYear " type="text " class="form-control " id="to " placeholder="To Year "/>
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Reason for Change</label>
<div class="col-xs-9 ">
<input name="student.reasonForChange " type="text " class="form-control " id="reasonForChange " placeholder="Reason for Change "/>
</div>
</div>
<div class="form-group ">
<label class="col-xs-2 control-label ">Tc Document</label>
<div class="col-xs-9 ">
<input type="file " class="form-control " name="student.tcDocument " />
</div>
</div>
<div class="form-group ">
<label class="col-xs-11 control-label "></label>
<div class="col-xs-20 ">
<button type="Submit " class="btn btn-success ">Finish</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /.form-body -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>