显示导航栏切换器，但我点击它并没有显示导航栏项目答案

【问题标题】：Navbar toggler is displayed, but I click on it and it doesnt shows the navbar items显示导航栏切换器，但我点击它并没有显示导航栏项目
【发布时间】：2019-11-13 17:50:42
【问题描述】：

我正在尝试获取一个包含两个项目（一个 ngbdropdown 和一个链接）的导航栏，当我降低分辨率时会显示切换器，但我点击它并没有做任何事情。

这是我的 html 代码：（最后缺少 nav 标签，我把它放在这里但没有检测到它）。

<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
    <a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
    <button
        class="navbar-toggler collapsed"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="true"
        aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>

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

    <ul class="navbar-nav ml-auto" >
            <li class="nav-item mr-2 padding-items">
                    <a  style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
                </li>
            <li class="nav-item ">
                <div
                    ngbDropdown
                    class="d-inline-block"
                >
                    <button
                        class="bNombre"
                        id="dropdownForm1"
                        ngbDropdownToggle
                    >
                       {{this.userName}}
                    </button>
                    <div ngbDropdownMenu aria-labelledby="dropdownForm1">
                        <button ngbDropdownItem (click)="this.logout()">Logout</button>
                    </div>
                </div>
            </li>
    </ul>
</div>

【问题讨论】：

能否请您在 stackblitz 中制作这个项目，以便我们轻松获取问题。
好的。我会做的。
抱歉，这是我第一次使用 stackblitz，我无法正确配置它。 stackblitz.com/edit/angular-1w7nyy
只需在按钮上添加或删除类show，例如[ngClass]="{'show': isNavbarMobile}"，然后在按钮上单击` (click)="isNavbarMobile = !isNavbarMobile"` 确保您首先初始化了isNavbarMobile= false
没关系@JavirGallegosGarcía 我为你做了一个例子stackblitz.com/edit/angular-simple-bootstrap-navbar 只是根据你的要求查看并制作它，就像你可以更改媒体查询、css 等只是看到这个并得到它。在单独的屏幕中打开结果，以便您轻松查看。

标签： html angular twitter-bootstrap navbar

【解决方案1】：

只需进行以下更改，即只需在按钮单击时添加或删除名为show 的类

component.ts

 isNavbarMobile: boolean = false;

component.html

     <nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
            <a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
            <button  (click)="isNavbarMobile = !isNavbarMobile" class="navbar-toggler collapsed" type="button" >
                <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" [ngClass]="{'show': isNavbarMobile}" id="navbarNavDropdown">

            <ul class="navbar-nav ml-auto" >
                    <li class="nav-item mr-2 padding-items">
                            <a  style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
                    </li>
                    <li class="nav-item ">
                        <div  ngbDropdown class="d-inline-block" >
                            <button class="bNombre" id="dropdownForm1" ngbDropdownToggle >
                               {{this.userName}}
                            </button>
                            <div ngbDropdownMenu aria-labelledby="dropdownForm1">
                                <button ngbDropdownItem (click)="this.logout()">Logout</button>
                            </div>
                        </div>
                    </li>
              </ul>
         </div>
  </nav>

【讨论】：

还要确保为导航栏切换按钮设置z-index: 999，以便确保它位于顶部并且可点击
谢谢。它可以工作，但它不显示 de 按钮下的项目。它显示在页面的左侧，但我猜这是一个 CSS 问题。
@JavirGallegosGarcía 是的，你是对的，这取决于你如何编写你的 CSS，这是导航栏的默认引导行为