Css 引导4水平窗体复选框未对齐

我正在尝试在Angular 5应用程序中集成Bootstrap 4。水平窗体上带有复选框和单选按钮的行与其他行不对齐。我使用了引导文档中的代码。此表单具有粘性导航栏和页脚。我的css中是什么导致了这个问题

风格：

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
  }
  .footer-text {
    margin-right: 2rem;
  }
body {
    min-height: 75rem;
    padding-top: 5rem;
  }
.router-outlet {
    margin: 2rem;
}

路由器出口内的html：

<form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            <label class="form-check-label" for="gridRadios1">
              First radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            <label class="form-check-label" for="gridRadios2">
              Second radio
            </label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            <label class="form-check-label" for="gridRadios3">
              Third disabled radio
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>  

---

如果尝试将按钮与标签垂直对齐，请将父显示类型设置为“灵活”，将“对齐项目”属性设置为“居中”，并删除单选按钮的上边距

.form-check {
    display: flex;
    align-items: center;
}
.form-check-input {
    margin-top: 0px;
}

如果要修复粘性页脚，请将位置设置为“固定”而不是“绝对”

---

如果尝试将按钮与标签垂直对齐，请将父显示类型设置为“灵活”，将“对齐项目”属性设置为“居中”，并删除单选按钮的上边距

.form-check {
    display: flex;
    align-items: center;
}
.form-check-input {
    margin-top: 0px;
}

如果要修复粘性页脚，请将位置设置为“固定”而不是“绝对”

---

不知道为什么会发生这种情况，但我通过删除表单检查输入使plnkr正常工作。您在此处发布的HTML输出实际上使用此代码对齐。在4.x Beta和Alpha中看起来不一致。您的代码输出在4.0.0通用版中按预期正确对齐。@Roberr C谢谢。更新对general release的引用修复了该问题。@RobertC您介意将您的评论转换为答案吗？Thx。不确定为什么会发生这种情况，但我通过删除表单检查输入使plnkr正常工作。您在此处发布的HTML输出，它实际上使用此代码对齐。在4.x Beta和Alpha中看起来不一致。您的代码输出在4.0.0通用版中按预期正确对齐。@Roberr C谢谢。更新对general release的引用修复了该问题。@RobertC您介意将您的评论转换为答案吗？谢谢。