如何在浮动的图层下方放置图层？答案

【问题标题】：How to position a layer underneath a layer that's floated right?如何在浮动的图层下方放置图层？
【发布时间】：2020-10-05 14:48:25
【问题描述】：

这就是我所拥有的：

这就是我想要的：

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

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

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

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

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 css-float

【解决方案1】：

使用w-100 类使最后一行全宽就可以完成这项工作。

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

JSFiddle

【讨论】：

完美。谢谢。