Bootstrap 5 Toast中如何将关闭按钮右对齐？end-0类无效

你遇到的问题是因为end-0的生效条件没满足——它属于Bootstrap的定位辅助类，需要父容器设置相对定位，同时按钮设置绝对定位才能起作用，而默认的toast-header没有相对定位样式，按钮也不是绝对定位，所以直接加end-0没用。

完全可以用Bootstrap原生布局类解决，不需要手动写CSS，给你两种可行方案：

方案一：用定位类实现精准贴边 #

给toast-header添加position-relative，给关闭按钮添加绝对定位相关类，同时调整垂直居中，还需注意Bootstrap 5的Toast关闭属性已更新为data-bs-dismiss="toast"（旧版data-dismiss不再生效）：

<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header position-relative">
        <strong class="me-auto">Help</strong>
        <button type="button" class="position-absolute end-0 top-50 translate-middle-y close border-0 bg-transparent" data-bs-dismiss="toast">
            <span>&times;</span>
        </button>
    </div>
    ...
</div>

• position-relative：让toast-header成为绝对定位元素的参考容器
• position-absolute end-0：将按钮定位到容器右侧
• top-50 translate-middle-y：让按钮垂直居中
• border-0 bg-transparent：去掉按钮默认的边框和背景，让×更贴合样式

方案二：用flex布局调整内边距 #

如果不想用定位，可通过调整toast-header的内边距实现：

<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header px-0">
        <strong class="ms-3 me-auto">Help</strong>
        <button type="button" class="close" data-bs-dismiss="toast">
            <span>&times;</span>
        </button>
    </div>
    ...
</div>

• px-0：去掉toast-header默认的左右内边距，让按钮直接贴到Toast右侧边框
• ms-3：给标题添加左边距，保持原有的视觉间距

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