使用 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 就这样Image of messages in the bottom right corner

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>

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

Position error messages (alerts) in the bottom right corner using Bootstrap and CSS

html

css

twitter-bootstrap