如何将图层放置在正确浮动的图层下方？

Question

这是我的：

这就是我想要的：

我在锚层上尝试了 clearfix class，但没有任何改变。

这些问题有点相似，但还不够接近，无法使用：

到目前为止，这是我的标记：

<div class="form-group row">
  <label class="col-sm-3 col-form-label" for="SignIn_Username">Username</label>
  <div class="col-sm-8">
    <input class="form-control" data-val="true" data-val-required="Username is required" id="SignIn_Username" name="SignIn.Username" type="text" value="" />
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-3 col-form-label" for="SignIn_Password">Password</label>
  <div class="col-sm-8">
    <input class="form-control" data-val="true" data-val-required="Password is required" id="SignIn_Password" name="SignIn.Password" type="password" value="" />
  </div>
</div>
<div class="form-group row">
  <div class="col-sm-3">&nbsp;</div>
  <div class="col-sm-8">
    <div class="form-check">
      <input class="form-check-input" data-val="true" data-val-required="The Remember Me field is required." id="SignIn_RememberMe" name="SignIn.RememberMe" type="checkbox" value="true" /><input name="SignIn.RememberMe" type="hidden" value="false" />
      <label class="form-check-label" for="SignIn_RememberMe">Remember Me</label>
    </div>
  </div>
</div>
<div class="form-group row float-right mr-4">
  <div class="col-sm-11">
    <Button type="submit" class="btn btn-primary btn-sm text-nowrap">Sign In</Button>
  </div>
</div>
<div class="form-group row">
  <div class="col-sm-11">
    <a href="/">Forgot your password?</a>
  </div>
</div>

如何将锚行移动到按钮行下方？

Answer 1

用 w-100 class 使最后一行全宽即可。

<div class="form-group row w-100">
  <div class="col-sm-11">
    <a href="/">Forgot your password?</a>
  </div>
</div>

JSFiddle

如何将图层放置在正确浮动的图层下方？

How to position a layer underneath a layer that's floated right?

twitter-bootstrap

bootstrap-4

css-float