如何移除Bootstrap布局中按钮上移后表格上方的空白

问题原因 #

你用position: relative + 负top值移动按钮时，相对定位的元素只会改变视觉渲染位置，原本在文档流中占据的空间不会消失，这块保留的空间就是你看到的表格上方多余空白。

解决方案 #

方案1：调整按钮容器的外边距（优先用Bootstrap原生类，无需自定义CSS） #

不要单独给按钮加相对定位，直接给包裹按钮的card-title容器加负的上外边距即可，Bootstrap自带负边距类，直接修改容器类属性就行：

<!-- 原容器类是card-title d-flex align-items-center justify-content-end -->
<!-- 加上mt-n4负上外边距，数值可以根据需要调整n1~n5对应负1~5个spacer单位 -->
<div class="card-title d-flex align-items-center justify-content-end mt-n4">

按钮不需要加任何自定义类，直接删掉之前的btn-top类和对应的自定义CSS即可，这种方案最符合Bootstrap的设计规范，不会破坏文档流。

方案2：调整自定义CSS消除占位 #

如果一定要保留相对定位的写法，给按钮加负的下外边距抵消掉原本保留的占位空间就行，修改你的btn-top样式：

.btn-top {
    position: relative; 
    top: -100px;
    margin-bottom: -100px; /* 和负top值保持一致，抵消占位 */
}

方案3：用绝对定位（适合按钮要超出卡片边界的场景） #

给卡片的card-body加position: relative，然后按钮用绝对定位固定到右上角，这种方式按钮完全脱离文档流，不会占用任何空间：

1. 给card-body加类：

<div class="card-body position-relative">

2. 修改按钮的自定义样式：

.btn-top {
    position: absolute;
    top: 16px; /* 调整这个值控制到顶部的距离 */
    right: 24px; /* 调整这个值控制到右侧的距离 */
}

如果两个按钮并排，给第二个按钮也加上btn-top类，调整right值错开位置即可。

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