Rails 7中Devise的Flash Message移动端部分隐藏的解决方法

问题原因 #

当前提示框采用绝对定位+居中类的布局，但未限制宽度，窄屏设备下内容易超出视口；同时top:5px的设置可能导致提示框顶部被页面元素遮挡。

修复方案 #

通过以下调整让提示框在移动端完整展示：

• 限制宽度适配视口：给提示框添加宽度控制类（如Bootstrap的w-95）或自定义样式max-width:95%，确保内容不超出屏幕边界，再配合mx-auto实现水平居中。
• 调整定位规则：替换start-50 translate-middle-x为left:0; right:0; margin:0 auto，让提示框在父容器内居中且不越界。
• 优化层级避免遮挡：添加z-index:9999确保提示框显示在其他元素上方。
• 适配内容排版：用p-2调整内边距、fs-6设置移动端字体大小，避免内容拥挤溢出。

修改后的代码示例 #

<div class="alert alert-warning alert-dismissible fade show position-absolute" 
     role="alert" 
     style="top: 5px; left: 0; right: 0; margin: 0 auto; max-width: 95%; z-index: 9999;">
  You need to sign in or sign up before continuing.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

若偏好纯Bootstrap类实现（减少内联样式）：

<div class="alert alert-warning alert-dismissible fade show position-absolute w-95 mx-auto z-3" 
     role="alert" 
     style="top: 5px;">
  You need to sign in or sign up before continuing.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

补充提示 #

如果页面有固定导航栏，需将提示框的top值设为大于导航栏高度（比如导航栏高60px，就设top:65px），避免被导航栏遮挡。

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