如何修复固定定位锚链接占满页面宽度的问题？

问题核心是Bootstrap的fixed-bottom类会强制元素宽度撑满视口，float-end仅作用于内部图标，无法改变锚标签本身的宽度。以下是几种简洁的解决方法：

方法一：使用Bootstrap内置定位与行内块类 #

直接替换HTML中的类，利用Bootstrap的定位类固定位置，同时让元素宽度自适应内容：

<a id="quick-anchor-top" href="#header-title-1" class="position-fixed bottom-0 end-0 d-inline-block"> 
  <i class="fa-solid fa-arrow-up"></i>
</a>

• position-fixed：开启固定定位
• bottom-0：固定在页面底部
• end-0：固定在页面右侧（适配Bootstrap的RTL布局逻辑，等价于right: 0）
• d-inline-block：让元素宽度由内部内容决定，避免撑满整个底部

原有CSS无需修改，margin:20px会自动让按钮与右下角保持20px的间距。

方法二：使用Bootstrap宽度适配类（5.1+版本可用） #

如果你的Bootstrap版本是5.1及以上，直接添加w-fit类即可让宽度自适应内容，配合原有定位类：

<a id="quick-anchor-top" href="#header-title-1" class="fixed-bottom float-end w-fit"> 
  <i class="fa-solid fa-arrow-up"></i>
</a>

w-fit是Bootstrap 5.1新增的类，等价于CSS的width: fit-content;，直接解决宽度撑满的问题。

方法三：纯CSS调整（不依赖Bootstrap类） #

如果不想修改太多类，也可以直接在CSS中添加定位与宽度控制：

#quick-anchor-top {
    font-size: 25px;
    padding: 15px 25px 15px 25px;
    border-radius: 50px;
    color: rgb(0, 0, 0);
    background-color: rgba(182, 20, 20, 0.800);
    transition: all 0.4s ease;
    margin: 20px;
    /* 添加以下定位与宽度控制 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: fit-content;
}

同时移除HTML中的fixed-bottom float-end类，避免样式冲突。

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