Bootstrap固定头部Flexbox布局下元素重叠问题求助

问题描述 #

使用Bootstrap创建固定头部时，asset/fetching.gif 会与 asset/logout.png 发生重叠，已尝试为gif添加mx-2类增加间距，但问题未解决。

代码示例 #

<div class="fixed-top header shadow-sm d-flex align-items-center justify-content-between p-3" style="margin-right:10px;margin-left:10px;">
    <div class="d-flex align-items-center">
        <h1 class="text-2xl pt-2 d-none d-sm-block">Smart Problem-solving using AI-driven Resource Kit</h1>
        <h1 class="text-2xl pt-2 d-sm-none">S.P.A.R.K</h1> 
    </div>
    <img id="fetchingGif" src="asset/fetching.gif" alt="Fetching" class="w-auto h-12 max-h-12 mx-2">
    <button id="logoutBtn" class="btn" style="background-color:transparent;padding:0;border:none;">
        <img src="asset/logout.png" style="width:40px;height:40px;" alt="Logout">
    </button>
</div>

问题原因 #

父容器使用justify-content-between后，第一个子元素（标题区）靠左，最后一个子元素（退出按钮）靠右，中间的gif元素被挤压在剩余空间中。当屏幕宽度不足时，中间元素和右侧元素会因布局逻辑冲突发生重叠；另外mx-2是给gif添加左右margin，但没有从结构上保证两个右侧元素的组合布局，导致间距控制失效。

解决方案 #

将gif和退出按钮放入同一个flex子容器中，让它们作为一个整体在头部右侧，同时调整gif的右侧间距为me-2（仅右侧margin，避免浪费左侧空间）：

<div class="fixed-top header shadow-sm d-flex align-items-center justify-content-between p-3" style="margin-right:10px;margin-left:10px;">
    <div class="d-flex align-items-center">
        <h1 class="text-2xl pt-2 d-none d-sm-block">Smart Problem-solving using AI-driven Resource Kit</h1>
        <h1 class="text-2xl pt-2 d-sm-none">S.P.A.R.K</h1> 
    </div>
    <!-- 将两个右侧元素放入同一flex容器 -->
    <div class="d-flex align-items-center">
        <img id="fetchingGif" src="asset/fetching.gif" alt="Fetching" class="w-auto h-12 max-h-12 me-2">
        <button id="logoutBtn" class="btn" style="background-color:transparent;padding:0;border:none;">
            <img src="asset/logout.png" style="width:40px;height:40px;" alt="Logout">
        </button>
    </div>
</div>

补充说明 #

• 使用d-flex align-items-center包裹右侧元素，保证gif和按钮垂直居中对齐；
• me-2替代mx-2，仅给gif添加右侧间距，更贴合布局需求；
• 若仍存在空间不足问题，可尝试移除父容器的自定义margin-right/left，改用Bootstrap的px-3类控制内边距，避免固定定位元素的宽度计算异常。

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