BOOTSTRAP：如何让我当前的导航栏有一个下拉选项？

Posted 2023-05-08

【中文标题】BOOTSTRAP：如何让我当前的导航栏有一个下拉选项？

【英文标题】：BOOTSTRAP: How do I get my current Nav bar to have a dropdown option?

【发布时间】：2021-06-04 12:13:43

【问题描述】：

我使用的模板似乎已不存在：https://startbootstrap.com/template-overviews/freelancer

Gif image of my current nav bar

我需要帮助，让“程序”一词成为当前引导代码中的下拉选项。 Services、About 和 Contact href 只需滚动到同一页面中的锚点。

任何帮助将不胜感激。

这是我当前的代码：

<!-- a copy of the custom js script -->
!function(t)"use strict";t('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname)var o=t(this.hash);if((o=o.length?o:t("[name="+this.hash.slice(1)+"]")).length)return t("html, body").animate(scrollTop:o.offset().top-71,1e3,"easeInOutExpo"),!1),t(document).scroll(function()100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()),t(".js-scroll-trigger").click(function()t(".navbar-collapse").collapse("hide")),t("body").scrollspy(target:"#mainNav",offset:80);function o()100<t("#mainNav").offset().top?t("#mainNav").addClass("navbar-shrink"):t("#mainNav").removeClass("navbar-shrink")o(),t(window).scroll(o),t(function()t("body").on("input propertychange",".floating-label-form-group",function(o)t(this).toggleClass("floating-label-form-group-with-value",!!t(o.target).val())).on("focus",".floating-label-form-group",function()t(this).addClass("floating-label-form-group-with-focus")).on("blur",".floating-label-form-group",function()t(this).removeClass("floating-label-form-group-with-focus")))(jQuery);

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Page Title</a>
            <button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars"></i>
            </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item mx-0 mx-lg-1">
                            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">Programs</a>
                        </li>
                        <li class="nav-item mx-0 mx-lg-1">
                            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Services</a>
                        </li>
                        <li class="nav-item mx-0 mx-lg-1">
                            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
                        </li>
                        <li class="nav-item mx-0 mx-lg-1">
                            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
    </div>
</nav>

<!-- These are my references at the bottom of the page -->
  <!-- Bootstrap core javascript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Contact Form JavaScript -->
  <script src="js/jqBootstrapValidation.js"></script>
  <script src="js/contact_me.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/freelancer.min.js"></script>

【参考方案1】：

这直接来自 here 的 Bootstrap(v5.0) 文档。我建议找出您的模板使用的引导程序版本，并查看文档是否相同。如果您的模板不是很旧，我想它会使用 v4.0 或更高版本。将您的 HTML 构建成这样的结构应该相对简单，更重要的是，不会破坏您现有的任何样式。

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>