Extra margin being added for unknown reason
Question
I have a form and there is a weird extra margin, would appreciate any help in finding why it is so.
Here is my code: https://jsfiddle.net/cc0k1ug5/#&togetherjs=R9HI9bogml
HTML
<body>
<div class="container-fluid">
<div class="home-header" name="header-text">
<div class="row">
<h1 class="col-lg-6 col-md-6 col-sm-6 col-xs-12 main-title">Play to Learn</h1>
<form class="form-horizontal form-card col-lg-5 col-md-5 col-sm-5 col-xs-12" role="form">
<div class="form-group">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<input type="text" ng-model="user.username" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<input type="email" ng-model="user.email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<input type="password" ng-model="user.password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<input type="password" ng-model="user.verifyPassword" class="form-control" id="inputVerifyPassword" placeholder="Verify Password">
</div>
</div>
<button ng-click="register(user)" class="btn btn-default col-lg-10 col-md-10 col-sm-10 col-xs-10">
Register</button>
</form>
</div>
</div>
</div>
</body>
CSS
.home-header {
/*background: #f6512b;*/
background: linear-gradient(#F6882E, #F25950);
/*background: linear-gradient(#23A8C6, #5F6EB3);*/
display: block;
padding-bottom: 5%;
padding-top: 5%;
width: 100%;
}
.form-card {
padding: 2% 2% 2% 2%;
background: #F8F8F8;
border-radius: 1%;
margin-top: 5%;
margin-bottom: 3%;
max-width: 35%;
margin-left: 0px;
margin-right: 0px;
}
.main-form-field {
margin-left: 5%;
max-width: 75%;
}
.main-title {
margin-top: 10%;
margin-left: 10%;
margin-right: 0;
color: #ffffff;
}
.form-group {
display: block;
}
Thanks
2 answers
solution1
0 2016-03-12 04:13:39
Below class adding padding , remove it.
.container-fluid {
padding-right: 15px;
/* padding-left: 15px; */
margin-right: auto;
margin-left: auto;
}
solution2
0 2016-03-12 05:12:46
It seems that bootstrap uses css rule like .container-fluid > .row to fix the padding, and when you insert additional layer of div you broke it.
If you replace your
<div class="container-fluid">
<div class="home-header" name="header-text">
<div class="row">
...
</div>
</div>
</div>
with
<div class="container-fluid">
<div class="row home-header">
...
</div>
</div>
you will have your fix for free without messing with bootstrap-created css rules.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.