Bootstrap 4实现Alert悬浮于Row上方，关闭时不影响布局

我来帮你搞定这个问题！核心就是要让alert关闭后仍然占据原来的空间，这样row就不会往上跑了。下面给你几个实用的方案：

方案1：用CSS visibility 替代 display: none #

默认的alert关闭逻辑（比如Bootstrap的data-dismiss）会直接把元素从布局中移除，导致row上移。我们可以改成视觉隐藏但保留空间的方式：

HTML结构 #

<div class="container">
  <div class="alert alert-warning" id="myAlert">
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    这是一个需要保留空间的提示框
  </div>
  <div class="row">
    <div class="col">
      这里是row的内容，关闭alert后我不会往上移
    </div>
  </div>
</div>

自定义CSS #

/* 关闭时的隐藏类 */
.alert.hidden-alert {
  visibility: hidden;
  opacity: 0;
  /* 可选：添加过渡动画，让关闭更平滑 */
  transition: visibility 0s, opacity 0.3s linear;
}

替换默认关闭逻辑的JS #

document.querySelector('.close').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('myAlert').classList.add('hidden-alert');
});

这个方法最灵活，不管alert内容高度怎么变化，都能完美保留空间。

方案2：给alert套固定高度容器（适合高度固定的场景） #

如果你的alert高度是固定的，可以给它套一个设置了min-height的容器，这样即使alert被移除，容器依然占据原有空间：

<div class="container">
  <!-- 这里的min-height根据你的alert实际高度调整 -->
  <div class="alert-container" style="min-height: 60px;">
    <div class="alert alert-warning" id="myAlert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      这是一个高度固定的提示框
    </div>
  </div>
  <div class="row">
    <div class="col">
      这里是row的内容，关闭alert后我不会往上移
    </div>
  </div>
</div>

这个方法不需要额外JS，非常省事，但只适合alert高度固定的场景。

方案3：基于Bootstrap Collapse组件改造（贴合框架的优雅方式） #

如果你想用Bootstrap原生组件，可以用Collapse来实现，只需要修改一点CSS让它关闭时不折叠高度：

HTML结构 #

<div class="container">
  <div class="alert alert-warning collapse show" id="myAlert">
    <button type="button" class="close" data-toggle="collapse" data-target="#myAlert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    这是一个用Collapse控制的提示框
  </div>
  <div class="row">
    <div class="col">
      这里是row的内容，关闭alert后我不会往上移
    </div>
  </div>
</div>

自定义CSS #

/* 覆盖Collapse默认的折叠逻辑，保留高度 */
.collapse:not(.show) {
  visibility: hidden;
  opacity: 0;
  height: auto !important;
}

这样既用到了Bootstrap的原生组件，又实现了保留空间的需求。

你可以根据自己的场景选择最合适的方案～

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