为什么 Bootstrap Toasts 是透明的但坚持内容? [英] Why is Bootstrap Toasts transparent but sticks to the content?

查看：40
本文介绍了为什么 Bootstrap Toasts 是透明的但坚持内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 Bootstrap 5 站点和一个 Toasts，显示访问者何时离线.

我的 Toasts 位于页面底部并且已修复.如果您转到该页面并且 Toast 位于按钮上，则即使按钮未显示，它也会覆盖该按钮.如何通过将 Toast 放在内容的顶部来使 Toast 消失而不干扰页面?在Bootstrap文档的例子中就没有这个问题.

index.html :

<html lang="fr";class=h-100"><头><元字符集=utf-8"><元名称=视口"内容=宽度=设备宽度，初始比例=1"><body class="position-relative d-flex flex-column bg-dark text-white text-center";data-bs-spy=滚动"数据目标=#navbar"；data-bs-offset=85"tabindex=0"><div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3"><div id="updateToast";class="toast d-none";角色=警报"aria-live=断言"；aria-atomic=真"><div class="toast-header"><svg xmlns="http://www.w3.org/2000/svg";宽度=20"高度=20"填充=当前颜色"class="bi bi-arrow-repeat text-success";viewBox=0 0 16 16"><路径d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192.41l-1.96611 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534/9z<path fill-rule="evenodd";d=M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A530Z 7H12.9A530Z 0002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg><strong class="me-auto">Mise à jour disponible</strong>

<div class="toast-body text-start text-dark">Cliquez ICI 倒mettre à jour.

<div id="offlineToast";类=吐司"角色=警报"aria-live=断言"；aria-atomic=真"><div class="toast-header"><svg xmlns="http://www.w3.org/2000/svg";宽度=20"高度=20"填充=当前颜色"class="bi bi-wifi-off text-danger";viewBox=0 0 16 16"><路径d=M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 .7.30510 0 0-.045 0 .7 .65 18 4 0 0 0 8 4 0.0481 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.56525 0-.063.56525 0-.063.565 8 4 0.856 5 8 0-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 ..063.745.525.525 . .525.525 . .525.525 . . 5 . 0 4 0 1 0 . 3 0 . 5 9 0 0 . 5 4 0 1 6 9 8 . 2 5 4 0 3 0 8 0 . 2 6 1 0 9 8 . 2 2 7.545 1.785.907a.482.482933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 .4078-4095-400000000000000000000000000000000000000000000000000000000000000000000000000000..645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07z.123.0 0-1.811-1.07z.123.07.1.811-1.07z.123.07.16.123.07.16.165.1676723676726772376723767207-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.2555a.195-.197-.518.04-.66A1.990 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/＞</svg><strong class="me-auto">Vous êtes hors-ligne</strong><按钮类型=按钮"类=btn-close"；data-bs-dismiss=吐司"；aria-label=关闭"></button>

<div class="toast-body text-start text-dark">Les informations de cette page peuvent être obsolètes.

<script src="bootstrap.bundle.min.js"></script><script src="toasts.js"></script></html>

toasts.js :

window.addEventListener('offline', () => {var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))var toastList = toastElList.map(function(toastEl) {返回新的 bootstrap.Toast(toastEl)});toastList.forEach(toast => toast.show());});window.addEventListener('online', () => {var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))var toastList = toastElList.map(function(toastEl) {返回新的 bootstrap.Toast(toastEl)});toastList.forEach(toast => toast.hide());});

解决方案

只需将 hide 类添加到您的 toast 元素中，如

I have a Bootstrap 5 site and a Toasts that shows when the visitor is offline.

My Toasts is at the bottom of the page and it is fixed. If you go to the page and the Toasts is on a button, it covers the button even though it is not displayed. How to make the Toast disappear without it disturbing the page by putting itself on top of the content ? In the example of the Bootstrap document there is no such problem.

index.html :

<!doctype html>
<html lang="fr" class="h-100">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">

    <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3">
      <div id="updateToast" class="toast d-none" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat text-success" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          <strong class="me-auto">Mise à jour disponible</strong>
        </div>
        <div class="toast-body text-start text-dark">
          Cliquez ICI pour mettre à jour.
        </div>
      </div>
      <div id="offlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16">
            <path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
          </svg>
          <strong class="me-auto">Vous êtes hors-ligne</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body text-start text-dark">
          Les informations de cette page peuvent être obsolètes.
        </div>
      </div>
    </div>

    <script src="bootstrap.bundle.min.js"></script>
    <script src="toasts.js"></script>

  </body>

</html>

toasts.js :

window.addEventListener('offline', () => {
  var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  });
  toastList.forEach(toast => toast.show());
});

window.addEventListener('online', () => {
  var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  });
  toastList.forEach(toast => toast.hide());
});

解决方案

just add the class hide to your toast element like

 <div id="offlineToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">...</div>

这篇关于为什么 Bootstrap Toasts 是透明的但坚持内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆