使用Bootstrap开发登录表单时小屏幕下按钮等元素溢出div问题

• 按钮错位偏移：你自定义的buttonPos、forgetPos、rememberPos等定位类大概率使用了固定margin、padding或定位值，和Bootstrap原生流式布局规则冲突，不同尺寸下计算出的元素位置不符合预期就会出现偏移。
• 小屏元素溢出：一是不符合Bootstrap栅格系统嵌套规则，col-*类必须被row类包裹才能正常计算宽度；二是你给表单外层加了固定的col-8类，没有配置响应式断点，小屏幕下依然强制占父容器80%宽度，内容宽度超过容器承载上限就会溢出。

1. 补全栅格结构：给col-8外层新增row类，同时给列配置响应式断点，比如设置为col-md-8 col-11，桌面端占8列宽度，移动端占11列宽度，预留足够的内容展示空间。
2. 替换自定义定位逻辑：移除自定义定位类的固定偏移属性，改用Bootstrap原生间距工具类（mt-*/mb-*/me-*等）调整元素位置，避免和原生布局逻辑冲突。
3. 调整元素宽度适配规则：给登录按钮添加w-100 w-md-auto类，小屏幕下占满整行，桌面端保留自适应宽度；修正HTML语义错误，把p标签从a标签内移出，直接给a标签设置块级属性。
4. 给表单外层容器添加overflow: hidden属性兜底，极端小屏下避免内容溢出破坏页面整体布局。

<div class="container" style="margin-top: 70px;">
  <!-- 新增row类包裹栅格列 -->
  <div class="row justify-content-center">
    <!-- 新增响应式栅格类，调整间距 -->
    <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-md-8 col-11 overflow-hidden">
      <p id="signText" class="mb-3"> Signin Form</p>
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">Email address</label>
      </div>
      <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>
      <!-- 修正HTML语义，用Bootstrap类调整位置 -->
      <a href="#" class="d-block text-end mb-2">Forget Password?</a>
      <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          Remember Me
        </label>
      </div>
      <!-- 新增响应式宽度类 -->
      <button type="button" class="btn btn-success w-100 w-md-auto">Login</button>
    </div>
  </div>
</div>

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