bootstrap 5导航栏切换图标不起作用

huangapple
go评论160阅读模式
英文:

bootstrap 5 navbar toggler icon not working

问题

I tried to mobile view and the navbar toggler is not showing items.

英文:

I tried the navbar toggler in mobile view and it is not showing the list.

here is my code, I have a CSS file linked in the head tag and other script tags inside the body tag

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;body&gt;

    &lt;header class=&quot;bg-info&quot;&gt;
        &lt;div class=&quot;row text-white&quot;&gt;
            &lt;div class=&quot;col-md-6 xs-9 &quot;&gt;
                &lt;h2&gt;yahiya muhammed&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-6 col-xs-3  my-auto&quot;&gt;
                &lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
                    &lt;button class=&quot;navbar-toggler ms-auto&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                    &lt;/button&gt;
                  
                    &lt;div class=&quot;collapse navbar-collapse justify-content-end &quot; id=&quot;navbarSupportedContent&quot;&gt;
                      &lt;ul class=&quot;navbar-nav &quot;&gt;
                        &lt;li class=&quot;nav-item active&quot;&gt;
                          &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;services&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;prjects&lt;/a&gt;
                          &lt;/li&gt;
                       &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;contact me&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                     
                    &lt;/div&gt;
                  &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&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;
    &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;

<!-- end snippet -->

I tried to mobile view and the navbar toggler is not showing items

答案1

得分: 1

你的切换按钮具有不正确的属性。 将data-toggle="collapse"更改为data-bs-toggle="collapse"，将data-target="#navbarSupportedContent"更改为data-bs-target="#navbarSupportedContent"。

以下是修正后的示例代码：

&lt;button class=&quot;navbar-toggler ms-auto&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
英文:

Your toggle button has incorrect attributes. Change data-toggle=&quot;collapse&quot; to data-bs-toggle=&quot;collapse&quot; and change data-target=&quot;#navbarSupportedContent&quot; to data-bs-target=&quot;#navbarSupportedContent&quot;.

Working snippet below:

&lt;button class=&quot;navbar-toggler ms-auto&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;header class=&quot;bg-info&quot;&gt;
    &lt;div class=&quot;row text-white&quot;&gt;
        &lt;div class=&quot;col-md-6 xs-9 &quot;&gt;
            &lt;h2&gt;yahiya muhammed&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-6 col-xs-3  my-auto&quot;&gt;
          
            &lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
                &lt;button class=&quot;navbar-toggler ms-auto&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                  &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                &lt;/button&gt;
              
                &lt;div class=&quot;collapse navbar-collapse justify-content-end &quot; id=&quot;navbarSupportedContent&quot;&gt;
                  &lt;ul class=&quot;navbar-nav &quot;&gt;
                    &lt;li class=&quot;nav-item active&quot;&gt;
                      &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;services&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                        &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;prjects&lt;/a&gt;
                      &lt;/li&gt;
                   &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link text-white&quot; href=&quot;#&quot;&gt;contact me&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                 
                &lt;/div&gt;
              &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/header&gt;

    &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;
  &lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 13:08:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/75357517.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定