一些 Bootstrap 元素在 Angular 项目中不起作用

Question

我正在使用 Bootstrap 和 Angular 开发一个项目，但它运行不正常。下拉菜单、手风琴等某些元素无法正常工作。

有点奇怪，因为在单独的 HTML 文件或 Codeply 中一切正常，但在我的项目中却不行。

比如在我被攻击的代码中，你可以看到一个手风琴的例子。它在单独的 HTML 文件和 Codeply 中工作，但在我的项目中，你可以很好地看到它，但不要做任何事情。你可以点击任何地方，但它没有响应（没有动作，没有错误，什么都没有）。

我尝试使用 bootstrap 安装版本和 https 参考，结果相同（不工作）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Main</title>
<!--
    <link rel="stylesheet" href="../../main.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    


  </head>

<body>
    <div class= "container">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                EXAMPLE TEXT 1
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              EXAMPLE TEXT 2
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                EXAMPLE TEXT 3
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

尝试了不同的版本、不同的导入方式、不同的组件（下拉菜单、手风琴、弹出窗口...）

Answer 1

Bootstrap Docs 状态：

Bootstrap JavaScript 与 JavaScript 不完全兼容像 Angualar 这样的框架。 Bootstrap 和框架都可能尝试改变相同的 DOM 元素，从而导致诸如下拉菜单卡在“打开”位置的错误。

如果使用 JavaScript 框架，您应该考虑使用特定于框架的包。在您的情况下，它将是 ng-bootstrap

一些 Bootstrap 元素在 Angular 项目中不起作用

问题描述投票：0回答：1

1个回答

最新问题

一些 Bootstrap 元素在 Angular 项目中不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1