问题

I am working on a blogger.com's theme leveraging bootstrap 5.
这是一个使用 Bootstrap 5 开发的 Blogger.com 主题。

The page seems to work well except that the navbar dropdown is not working.
页面似乎运行良好，除了导航栏的下拉菜单不起作用。

And if I test the browser in mobile width, the navbar's hamburger menu does NOT collapse after it is expanded.
如果我在移动宽度下测试浏览器，导航栏的汉堡菜单在展开后不会折叠。

In my chrome browser's inspect window, I do not see any javascript error.
在我的 Chrome 浏览器的检查窗口中，我没有看到任何 JavaScript 错误。

Perhaps I am missing some bootstrap libraries to be included?
也许我漏掉了一些需要包含的 Bootstrap 库？

This is the html code related to the navbar:
这是与导航栏相关的 HTML 代码：

<a class='navbar-brand' href='/'>LOGO</a>
<button aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarSupportedContent' data-bs-toggle='collapse' type='button'>
  <span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
  <ul class='navbar-nav me-auto mb-2 mb-lg-0'>
    <li class='nav-item'><a aria-current='page' class='nav-link active' href='/'>Home</a></li>
    <li class='nav-item'><a class='nav-link' href='#'>Link</a></li>
    <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' role='button'>Dropdown</a>
      <ul class='dropdown-menu'>
        <li><a class='dropdown-item' href='#'>Action</a></li>
        <li><a class='dropdown-item' href='#'>Another action</a></li>
        <li><hr class='dropdown-divider'/></li>
        <li><a class='dropdown-item' href='#'>Something else here</a></li>
      </ul>
    </li>
    <li class='nav-item'><a class='nav-link disabled'>Disabled</a></li>
  </ul>
  <form action='/search' class='d-flex' method='GET' role='search'>
    <input aria-label='Search' class='form-control me-2' name='q' placeholder='Search' type='search'/>
    <button class='btn btn-secondary' type='submit'>Search</button>
  </form>
</div>


<details>
<summary>英文:</summary>
I am working on a blogger.com&#39;s theme leveraging bootstrap 5. 
The page seems to work well except that the navbar dropdown is not working. And if I test the browser in mobile width, the navbar&#39;s hamburger menu does NOT collapse after it is expanded.
In my chrome browser&#39;s inspect window, I do not see any javascript error. [![enter image description here][1]][1]
Perhaps I am missing some bootstrap libraries to be included?
The site is [https://theme-lab-center.blogspot.com/][2] (Update: The problem has been resolved with using Bootstrap 5.2 instead of 5.3. The latest source code of this page will not reflect the original problem.)
This is the html code related to the navbar:

<a class='navbar-brand' href='/'>LOGO</a>
<button aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarSupportedContent' data-bs-toggle='collapse' type='button'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav me-auto mb-2 mb-lg-0'>
<li class='nav-item'><a aria-current='page' class='nav-link active' href='/'>Home</a></li>
<li class='nav-item'><a class='nav-link' href='#'>Link</a></li>
<li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' role='button'>Dropdown</a>
<ul class='dropdown-menu'>
<li><a class='dropdown-item' href='#'>Action</a></li>
<li><a class='dropdown-item' href='#'>Another action</a></li>
<li><hr class='dropdown-divider'/></li>
<li><a class='dropdown-item' href='#'>Something else here</a>
</li>
</ul>
</li>
<li class='nav-item'><a class='nav-link disabled'>Disabled</a></li>
</ul>
<form action='/search' class='d-flex' method='GET' role='search'>
<input aria-label='Search' class='form-control me-2' name='q' placeholder='Search' type='search'/>
<button class='btn btn-secondary' type='submit'>Search</button>
</form>
</div>

  [1]: https://i.stack.imgur.com/KNDHu.png
[2]: https://theme-lab-center.blogspot.com/
</details>
# 答案1
**得分**: 0
你需要同时包括Bootstrap的JS和Bootstrap的CSS。你有两个选择：
**选项1：包括Bootstrap的JavaScript捆绑包**
```html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

选项2：分别包括Bootstrap的JavaScript和PopperJS

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

查看下面的示例。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class='navbar-brand' href='/'>LOGO</a>
      <button aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarSupportedContent' data-bs-toggle='collapse' type='button'>
        <span class='navbar-toggler-icon'></span>
      </button>
      <div class='collapse navbar-collapse' id='navbarSupportedContent'>
        <ul class='navbar-nav me-auto mb-2 mb-lg-0'>
          <li class='nav-item'><a aria-current='page' class='nav-link active' href='/'>Home</a></li>
          <li class='nav-item'><a class='nav-link' href='#'>Link</a></li>
          <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' role='button'>Dropdown</a>
            <ul class='dropdown-menu'>
              <li><a class='dropdown-item' href='#'>Action</a></li>
              <li><a class='dropdown-item' href='#'>Another action</a></li>
              <li><hr class='dropdown-divider' /></li>
              <li><a class='dropdown-item' href='#'>Something else here</a></li>
            </ul>
          </li>
          <li class='nav-item'><a class='nav-link disabled'>Disabled</a></li>
        </ul>
        <form action='/search' class='d-flex' method='GET' role='search'>
          <input aria-label='Search' class='form-control me-2' name='q' placeholder='Search' type='search' />
          <button class='btn btn-secondary' type='submit'>Search</button>
        </form>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

英文:

You need to include Bootstrap’s JS along with Bootstrap's CSS. You have two options:

OPTION 1: Include Bootstrap's JavaScript bundle

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

OPTION 2: Include Bootstrap's JavaScript and PopperJS separately

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&quot; integrity=&quot;sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

See the snippet below.

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;title&gt;Bootstrap demo&lt;/title&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;navbar navbar-expand-lg bg-light&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;a class=&#39;navbar-brand&#39; href=&#39;/&#39;&gt;LOGO&lt;/a&gt;
&lt;button aria-controls=&#39;navbarSupportedContent&#39; aria-expanded=&#39;false&#39; aria-label=&#39;Toggle navigation&#39; class=&#39;navbar-toggler&#39; data-bs-target=&#39;#navbarSupportedContent&#39; data-bs-toggle=&#39;collapse&#39; type=&#39;button&#39;&gt;
&lt;span class=&#39;navbar-toggler-icon&#39;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&#39;collapse navbar-collapse&#39; id=&#39;navbarSupportedContent&#39;&gt;
&lt;ul class=&#39;navbar-nav me-auto mb-2 mb-lg-0&#39;&gt;
&lt;li class=&#39;nav-item&#39;&gt;&lt;a aria-current=&#39;page&#39; class=&#39;nav-link active&#39; href=&#39;/&#39;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&#39;nav-item&#39;&gt;&lt;a class=&#39;nav-link&#39; href=&#39;#&#39;&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li class=&#39;nav-item dropdown&#39;&gt;&lt;a aria-expanded=&#39;false&#39; class=&#39;nav-link dropdown-toggle&#39; data-bs-toggle=&#39;dropdown&#39; href=&#39;#&#39; role=&#39;button&#39;&gt;Dropdown&lt;/a&gt;
&lt;ul class=&#39;dropdown-menu&#39;&gt;
&lt;li&gt;&lt;a class=&#39;dropdown-item&#39; href=&#39;#&#39;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;dropdown-item&#39; href=&#39;#&#39;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&#39;dropdown-divider&#39; /&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;dropdown-item&#39; href=&#39;#&#39;&gt;Something else here&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&#39;nav-item&#39;&gt;&lt;a class=&#39;nav-link disabled&#39;&gt;Disabled&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;form action=&#39;/search&#39; class=&#39;d-flex&#39; method=&#39;GET&#39; role=&#39;search&#39;&gt;
&lt;input aria-label=&#39;Search&#39; class=&#39;form-control me-2&#39; name=&#39;q&#39; placeholder=&#39;Search&#39; type=&#39;search&#39; /&gt;
&lt;button class=&#39;btn btn-secondary&#39; type=&#39;submit&#39;&gt;Search&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

“Bootstrap 5 导航栏下拉菜单和汉堡按钮不起作用？”

问题

如何使用媒体查询将一个 div 移动到另一个 div 的上方。

将类添加到表行没有效果

Bootstrap下拉菜单在切换时更改背景颜色

在Bootstrap 5中滚动嵌套列

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论