Bootstrap表单按钮溢出容器：如何让按钮留在蓝色框内？

问题描述 #

我有一个如下所示的表单：

移除mb-3类没有任何作用，它只会消除输入框之间的间距。请问如何确保按钮留在蓝色框内？相关代码如下：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success float-end">Hop In</button>
</form>

解决方案 #

问题根源是float-end让按钮脱离了文档流，表单容器无法识别浮动元素的高度，导致按钮超出蓝色框。以下两种Bootstrap原生方法可以解决：

方法1：用Flex布局替代浮动（推荐） #

用d-flex justify-content-end容器包裹按钮，既实现右对齐，又保证元素在文档流内，容器能正确计算高度：

<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <div class="d-flex justify-content-end">
    <button type="submit" class="btn btn-success">Hop In</button>
  </div>
</form>

方法2：给表单添加清除浮动类 #

如果一定要保留float-end，给表单容器添加clearfix类，让容器包裹住浮动元素：

<form action="/user/loginattempt" class="p-3 rounded-4 clearfix" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success float-end">Hop In</button>
</form>

内容的提问来源于stack exchange，提问作者Ryolu