【问题标题】:Bootstrap alert button design is off and doesn't close when clicked引导警报按钮设计已关闭,单击时不会关闭
【发布时间】:2021-09-14 07:19:22
【问题描述】:

我正在尝试使用 Bootstrap,引导警报按钮不知何故根本不起作用。我所做的只是从 Bootstrap 复制代码:

但是页面显示这个?按钮的设计是关闭的,它不工作(不关闭)。我检查了所有内容:alert-dismissible 在那里,按钮有data-dismiss = 'alert',但不知何故它不起作用。我包含的脚本是 Bootstrap 捆绑包版本。

【问题讨论】:

    标签: html css bootstrap-modal bootstrap-5


    【解决方案1】:

    您更改了示例的一小部分:您的 data-dismiss 应该是 data-bs-dismiss 并且按钮上的类应该是 btn-close 而不是 close

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Holy guacamole!</strong> You should check in on some of those fields below.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    

    Documentation about dismissing

    仔细检查后,我注意到您的警报是Boostrap 4 alert。在您的示例中,您使用了 Bootstrap 5 中的 CSS 和 JavaScript,其中可关闭的警报应该类似于上面的示例。

    【讨论】:

    • 我意识到我使用的是 Bootstrap 4 文档而不是 v5!非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-06-11
    • 1970-01-01
    • 2022-01-03
    • 1970-01-01
    • 2011-08-08
    • 1970-01-01
    相关资源
    最近更新 更多