由於未知原因而增加的額外保證金

我有一個表單，並且有一個奇怪的額外保證金，希望能找到爲什麼會這樣的幫助。由於未知原因而增加的額外保證金

這裏是我的代碼：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; 
}

感謝

來源

2016-03-12 anonn023432

下面類中添加padding，將其刪除。

.container-fluid { 
    padding-right: 15px; 
    /* padding-left: 15px; */ 
    margin-right: auto; 
    margin-left: auto; 
}

來源

2016-03-12 04:13:39

看來，引導使用CSS規則像.container-fluid > .row固定填充，當你插入的div附加層，你把它弄壞了。

如果更換

<div class="container-fluid"> 
    <div class="home-header" name="header-text"> 
    <div class="row"> 
    ... 
    </div> 
    </div> 
</div>

與

<div class="container-fluid"> 
    <div class="row home-header"> 
    ... 
    </div> 
</div>

，你將有你的自由修正而與引導創建CSS規則搞亂。

來源

2016-03-12 05:12:46

由於未知原因而增加的額外保證金

回答

相關問題