Bootstrap中fixed-bottom类为何使按钮撑满宽度？如何修正？

你可以通过Bootstrap自带类的组合来实现需求，无需立刻编写自定义CSS，以下是两种可行方案：

方案一：Bootstrap类组合实现 #

利用fixed-bottom搭配容器、内边距和弹性布局类，既能固定底部位置，又能和顶部按钮保持一致的内边距：

示例代码（与顶部容器对齐） #

<!-- 顶部按钮区域 -->
<div class="container p-3">
    <button class="btn btn-primary">顶部按钮</button>
</div>

<!-- 底部固定按钮区域 -->
<div class="fixed-bottom container p-3">
    <div class="d-flex gap-2">
        <button class="btn btn-secondary">底部按钮1</button>
        <button class="btn btn-secondary">底部按钮2</button>
    </div>
</div>

• container保证底部区域与顶部按钮的容器宽度一致，避免按钮撑满整个屏幕
• p-3设置统一的内边距，和顶部按钮区域保持对齐
• d-flex让底部按钮横向排列，gap-2控制按钮间的间距

灵活写法（无需容器） #

如果不需要和顶部容器对齐，直接控制全屏内边距：

<div class="fixed-bottom w-100 px-3 py-3">
    <div class="d-flex gap-2">
        <button class="btn btn-secondary">底部按钮1</button>
        <button class="btn btn-secondary">底部按钮2</button>
    </div>
</div>

• w-100让底部区域占满屏幕宽度
• px-3/py-3分别控制左右、上下内边距，按需调整数值与顶部按钮匹配

方案二：自定义CSS（类组合不够灵活时） #

如果Bootstrap预设类无法满足精准需求，直接编写自定义样式：

/* 在wwwroot/css/site.css中添加 */
.fixed-bottom-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem; /* 和顶部按钮的内边距保持一致 */
    background-color: #fff; /* 防止被页面内容遮挡，按需设置 */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)); /* 适配Android底部安全区域 */
}

使用时：

<div class="fixed-bottom-buttons">
    <div class="d-flex gap-2">
        <button class="btn btn-secondary">底部按钮1</button>
        <button class="btn btn-secondary">底部按钮2</button>
    </div>
</div>

额外提示 #

Android模拟器的底部导航栏可能会遮挡按钮，Bootstrap 5+可以直接用pb-safe类替代自定义的安全区域内边距，给底部区域添加该类即可自动适配。

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