色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Navbar下拉菜單(折疊)在Bootstrap 5中不起作用

CSS
錢諍諍2年前8瀏覽0評論

我在嘗試用Bootstrap 5創(chuàng)建響應(yīng)菜單或下拉按鈕時遇到了一個問題。一切似乎都沒問題。導(dǎo)航圖標和。出現(xiàn)下拉圖標。但是它不起作用。當我點擊導(dǎo)航圖標或下拉按鈕時，沒有下拉菜單出現(xiàn)。

我想特別提一下，我還包含了jquery文件。但是沒有用。有人能告訴我這里發(fā)生了什么嗎？

最后一件事，我遇到了一些其他引導(dǎo)類的問題，比如mr-auto，ml-auto等等。bootstrap 5對于這種工作有什么缺陷或者新的類嗎？

以下是我的代碼:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                data-toggle="collapse"
                data-target="#navbar"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

引導(dǎo)數(shù)據(jù)庫4中使用的data-*屬性已在引導(dǎo)數(shù)據(jù)庫5中替換為data-bs-*

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

演示

正如文檔中所解釋的，所有JavaScript插件的數(shù)據(jù)屬性現(xiàn)在都有名稱空間，以幫助區(qū)分第三方和你自己的代碼的引導(dǎo)功能。這意味著任何javascript組件(折疊、導(dǎo)航條、轉(zhuǎn)盤、下拉菜單、標簽、模式等..)將只使用數(shù)據(jù)-bs-...屬性。

Bootstrap 5是一個重大更新，具有突破性的變化。這里還可以看到ml-auto/mr-auto已經(jīng)變成了ms-auto/me-auto。

確保在head標簽中添加了來自Javascript和CSS的bootstrap homepage的jsDeliver CDN鏈接。

**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

**<!-- JavaScript Bundle with Popper -->**

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

您已經(jīng)使用了在舊引導(dǎo)版本中使用的data-toggle屬性，而在引導(dǎo)版本5中，您需要使用data-bs-toggle屬性，并且最重要的事情之一是您已經(jīng)使(aria-expanded = & quot；true & quot).

我也面臨著同樣的問題。首先，我將data-target更改為data-bs-target，將data-toggle更改為data-bs-toggle。其次，我包含了bootstrap.bundle. min.js和普通bootstrap.min.js的cdn鏈接。添加兩個相同的腳本會導(dǎo)致問題

`

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>



    <div id="navbarSupportedContent" class="collapse navbar-collapse" >
        <ul class="navbar-nav me-auto">
            <li class="nav-item active">
                <a class="nav-link" href=@Url.Action("Index","Home")>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("AboutUs","Home")>About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("OurTeam","Home")>Our Team</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("Blog","Home")>Blog</a>
            </li>*@
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("ContactUs","Home")>Contact Us</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("LoanCalculator","Home")>Loan Calculator</a>
            </li>*@
        </ul>

    </div>




</nav>`

對我來說，只需在數(shù)據(jù)目標和數(shù)據(jù)切換中添加-bs就可以解決這個問題

<button
      className="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                **data-bs-toggle="collapse"
                data-bs-target="#navbar"**

            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

除了在主體中包含JS鏈接之外，按鈕和div還具有相同的aria-control/data-bs-target和ID:

& ltbutton class = & quotnavbar-tog gler & quot；type = & quot按鈕& quotdata-bs-toggle = & quot；崩潰& quotaria-controls = ' navbarSupportedContent '

& ltdiv class = & quot折疊導(dǎo)航欄-折疊& quotid = & quotnavbarSupportedContent & quot& gt

你用& quot數(shù)據(jù)切換& quotBootstrap 3中使用的此屬性您需要使用此屬性& quot數(shù)據(jù)-bs-切換& quot

我在編輯的當前網(wǎng)站中的下拉菜單有問題。今晚我終于有了一個帶下拉菜單的導(dǎo)航菜單，可以在點擊鏈接后關(guān)閉下拉菜單！我通過不同的模板把它設(shè)計成看起來呼呼的樣子。然而，當我將菜單添加到我正在編輯的網(wǎng)站時，移動切換菜單不可用；t開頭。我該如何解決這個問題？謝謝！: - )

<!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container">
      <div class="header-container d-flex align-items-center justify-content-between">
          
        <div class="logo">
            
          <!--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>-->
          
          <!-- Uncomment below if you prefer to use an image logo -->
          
          <a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
          
          <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav id="navbar" class="navbar">
            
          <ul>
            
            
            <!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
            <li><a class="nav-link scrollto" href="#about">About</a></li>
            <li><a class="nav-link scrollto" href="#services">Services</a></li>
            <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
            <li><a class="nav-link scrollto" href="#team">Team</a></li>-->
            
            
            <li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">About</a></li>
                
                <li><a class="scrollto" href="#more-about">Detailed Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 03</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 04</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 05</a></li>
                    
                  </ul>
                </li>
                    
                    
                <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">DropDown 06</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 07</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 08</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 09</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 10</a></li>
                    
                  </ul>
                </li>
                
                
            <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#contact">Contact Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 12</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 13</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 14</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 15</a></li>
                    
                  </ul>
                </li>
                
                
                <!--<li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
              </ul>
            </li>-->
            
            
            <!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
            
            
            <li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
          </ul>
          
          <i class="fas fa-bars mobile-nav-toggle"></i>
          
        </nav><!-- .navbar -->

      </div><!-- End Header Container -->
    </div>
  </header><!-- End Header -->

這里是“數(shù)據(jù)-基站-目標”id

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">

和div id必須相同

<div id="kickMyAss" class="collapse navbar-collapse">