BOOTSTRAP：如何讓我當前的導航欄有一個下拉選項？

Question

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

我當前導航欄的 Gif 圖像

我需要幫助讓“程序”這個詞成為當前引導代碼中的下拉選項。 服務、關於和聯系人 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.ot("[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>

Answer 1

這直接來自此處的 Bootstrap(v5.0) 文檔。 我建議找出您的模板使用的引導程序版本，並查看文檔是否相同。 如果您的模板不是很舊，我想它會使用 v4.0 或更高版本。 將您的 HTML 構建成這樣的結構應該相對簡單，更重要的是，不會破壞您現有的任何 styles。

<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>