如何用Bootstrap将提示框关闭按钮移至右下角并匹配官方样式？

修改后的完整代码 #

<div class="alert alert-danger alert-dismissible fade show d-inline-flex align-items-center gap-2" role="alert">
    <%= success %>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

核心调整点 #

• 把按钮移到文本旁边：
  • 给alert容器加d-inline-flex、align-items-center、gap-2三个类：
    • d-inline-flex让alert变成行内弹性容器，文本和按钮能排在同一行；
    • align-items-center保证两者垂直居中对齐；
    • gap-2给文本和按钮之间留一点间距，不会挤在一起。
• 匹配Bootstrap官方关闭按钮样式：
  • 把data-dismiss改成data-bs-dismiss，这是Bootstrap 5的标准属性，不然按钮点击后没反应；
  • 删除按钮里的<span aria-hidden="true">&times;</span>，Bootstrap 5的btn-close类已经自带叉号图标，手动加这个span会打乱官方样式；
  • 确认你项目里已经正确引入了Bootstrap 5的CSS和JS文件，没引的话按钮样式肯定不对。

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