6

我使用 ng-bootstrap Angular 2。

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
        <ul class="nav navbar-nav">  
           <li class="nav-item">
                <a class="nav-link" href="#">About</a>
           </li>
            <li class="nav-item">
                <div ngbDropdown>
                  <button class="btn" ngbDropdownToggle>Projects</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item"  >AA</button>
                  </div>
                </div>
            </li>
        </ul>
     </nav>

“下拉菜单”无法展开的问题

4

2 回答 2

2

很难看到您的特定项目中发生了什么，因为我刚刚复制并粘贴了您的代码，它工作得非常好，检查这个 plunker：http ://plnkr.co/edit/CFntB5mkshJ97x1aIGU1?p=preview

您可能想验证您是否正确导入 ( import {NgbModule} from '@ng-bootstrap/ng-bootstrap') 添加NgbModule模块：

@NgModule({ imports: [ BrowserModule, NgbModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}

于 2016-09-16T14:57:43.947 回答
0

如果您希望导航栏可切换，请查看此；

<nav class="navbar navbar-dark bg-inverse">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navExample" aria-controls="navExample" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="navExample">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-item nav-link">First link</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-item nav-link">Second link</a>
        </li>
    </ul>
</div>

如果您只需要导航栏中的下拉菜单，则可以使用官方网站中的示例；

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

确保您的 html 文件包含引导程序（我使用引导程序 4）。

于 2016-09-16T14:34:20.463 回答