当前位置： 文江博客话题详情

Bootstrap 5 导航栏折叠和下拉菜单

发布于 2025-01-09 09:50:33 字数 1928 浏览 1 评论 0原文

我在使用 Bootstrap 5 时遇到了一些导航栏问题。导航栏在展开后不会折叠，下拉列表也不会下降。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

原文

I'm having a little trouble with my navbar, using bootstrap 5. The navbar doesn't collapse after expanding and the dropdown list doesn't drop.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

暮色兮凉城 2025-01-16 09:50:33

Bootstrap 的许多组件都需要使用 JavaScript 才能运行。包括导航栏和下拉菜单。我添加了 font-awesome 和 Bootstrap JS 的相关源代码。

请在此处阅读 Bootstrap 5 简介，了解更多信息。

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

Many of Bootstrap's components require the use of JavaScript to function. Including navbars and dropdowns. I added the relevant source for both font-awesome and the Bootstrap JS.

Read more here on Bootstrap 5 Introduction.

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

回复 原文
~没有更多了~

关于作者

好菇凉咱不稀罕他

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文