twitter-bootstrap - 如何将图层放置在浮动的图层下方？

Question

这就是我所拥有的：

这就是我要的：

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

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

• 引导按钮下拉菜单不在按钮下方
• 将一个 HTML 元素放在另一个元素的正下方，而不是放在右边或左边

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

<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-bootstrapbootstrap-4css-float

Answer 1

使最后一行全宽与w-100类将完成这项工作。

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

JSFiddle