Question

我有一个表格，并且有一个奇怪的额外保证金，非常感谢找到原因的任何帮助。

这是我的代码：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;
}

由于

Answer 1

在添加def is_vowel(char): return char in ['a', 'e', 'i', 'o', 'u', 'y'] def piglatin(sentence): words = sentence.split() piglatin_words = [] for word in words: index = [is_vowel(ch) for ch in word].index(True) piglatin_words.append(word[index:] + word[:index] + 'ay') return ' '.join(piglatin_words) print piglatin('this is my original sentance')的课程下方，将其删除。

padding

Answer 2

似乎bootstrap使用像.container-fluid > .row这样的css规则来修复填充，当你插入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规则。

由于未知原因而添加额外保证金

2 个答案: