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

问题描述

这就是我所拥有的：

这就是我想要的：

我在锚点层尝试了clearfix类，但这并没有任何改变。

这些问题在远程上相似，但是距离不够远，无法使用：

• Bootstrap button dropdown not below button
• Position an HTML element right under another as opposed to positioned to the right or left

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

<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>

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

解决方法

使用w-100类使最后一行变为全宽度即可。

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

JSFiddle