如何在Bootstrap中避免绝对定位元素响应式重叠？

你的问题出在绝对定位脱离文档流上：父容器因为内部元素都用了绝对定位，高度会塌陷，导致底部的分类标签和社交图标重叠，而且文本长度变化时，容器无法自动适配高度，布局彻底混乱。

直接用Bootstrap的flex布局替换绝对定位，就能让元素自动跟随文本高度，响应式下也不会重叠，代码修改如下：

<aside class="row mb-4 m-0" id="poet-bio">
    <div class="col-lg-3 col-md-12 mb-4">
        <img src="aaa.png" class="img-fluid rounded-circle">
    </div>

    <div class="col-lg-9 col-md-12 d-flex flex-column">
        <!-- 文本部分：正常文档流，自动撑开容器高度 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <!-- 底部容器：自动推到文本下方，水平分布内容 -->
        <div class="mt-auto d-flex justify-content-between align-items-center pt-3">
            <!-- 分类标签：左边对齐 -->
            <div>
                <a href="#" class="author-categories">USA</a>
                <a href="#" class="author-categories">Novecento</a>
                <a href="#" class="author-categories">Poetry</a>
            </div>

            <!-- 社交图标：右边对齐 -->
            <div>
                <a href="#" class="me-2"><img class="social-icon" src="xxx.png"></a>
                <a href="#"><img class="social-icon" src="yyy.png"></a>
            </div>
        </div>
    </div>
</aside>

关键修改点： #

• 去掉所有position-absolute，把右侧容器改成d-flex flex-column，让内部元素垂直排列
• 底部容器加mt-auto，会自动被推到文本的最下方，不管文本有多长
• 底部容器用d-flex justify-content-between让分类和社交图标分别左右对齐，align-items-center保证垂直居中
• 社交图标之间加me-2（margin-end）来留间距，避免挤在一起

这样修改后，文本长度变化时容器会自动撑开高度，底部元素始终跟在文本后面，响应式下（比如移动端）元素会垂直堆叠，完全不会重叠。

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