位置错误消息（警报）在右下角使用Bootstrap和CSS

Question

我正在尝试显示一些错误消息，假设

<div class="alert alert-danger alert-dismissible fade show col-12" role="alert">
        This is an error
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<div class="alert alert-danger alert-dismissible fade show col-12" role="alert">
        This is an error
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

使用HTML，CSS，Bootstrap堆叠在屏幕右下角 就像这样右下角的消息的图像

Answer 1

您可以创建一个错误包装器div并将其定位为绝对。
例如。

.error-container{
  position:absolute;
  bottom:0;
  right:20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="error-container">
    <div class="alert alert-danger alert-dismissible fade show " role="alert">
      This is an error 1
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<div class="alert alert-danger alert-dismissible fade show " role="alert">
  This is an error 2
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
  </div>
</div>