Bootstrap Alert触发时下方内容下移，如何实现占满容器宽度且不挤动内容

实现方案 #

你只需要修改两处DOM的类即可达到预期效果：

1. 给告警占位符的父级.container-fluid添加position-relative类，让绝对定位的告警容器以该父容器为定位基准，而非全局视口
2. 给#liveAlertPlaceholder补充w-100和z-1类，w-100保证占位容器占满父级宽度，z-1确保告警浮在下层内容上方不被遮挡

修改后的核心代码片段如下：

<!-- 父容器加position-relative -->
<div class="container-fluid position-relative">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 原有导航代码无需改动 -->
  </nav>
  <!-- 告警容器加w-100、z-1 -->
  <div id="liveAlertPlaceholder" class="position-absolute w-100 z-1"></div>     
  <div id="mynetwork"></div>
</div>

效果说明 #

• 绝对定位的告警容器脱离文档流，不会挤占下方#mynetwork的位置，完全不会触发下层内容下移
• 因为父容器设置了相对定位，w-100会匹配父容器的全宽，告警会和未加定位时一样占满可用宽度
• z-1的层级设置可以避免告警被visjs生成的画布遮挡

如果需要调整告警的边距避免贴边，直接给#liveAlertPlaceholder加px-3类即可，不会影响整体布局逻辑。

内容的提问来源于stack exchange，提问作者Fazil Abdul Lathif