如何将ngbDropdown添加到bootstrap 4 navbar

h5qlskok  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(3)|浏览(173)

我使用ng-bootstrap Angular 2。

  1. <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  2. <ul class="nav navbar-nav">
  3. <li class="nav-item">
  4. <a class="nav-link" href="#">About</a>
  5. </li>
  6. <li class="nav-item">
  7. <div ngbDropdown>
  8. <button class="btn" ngbDropdownToggle>Projects</button>
  9. <div class="dropdown-menu">
  10. <button class="dropdown-item" >AA</button>
  11. </div>
  12. </div>
  13. </li>
  14. </ul>
  15. </nav>

字符串
问题“下拉菜单”无法展开

oyjwcjzk

oyjwcjzk1#

很难看到你的特定项目中发生了什么,因为我刚刚复制和粘贴了你的代码,它工作得很好,检查这个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 {}

wz8daaqr

wz8daaqr2#

最后,我把它作为Bootstrap 5。

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2. <a class="navbar-brand" href="#">Your App</a>
  3. <ul class="navbar-nav">
  4. <li class="nav-item">
  5. <a class="nav-link" href="#">Home</a>
  6. </li>
  7. <!-- Dropdown Menu -->
  8. <li ngbDropdown class="nav-item">
  9. <a
  10. class="nav-link"
  11. id="dropdownMenu"
  12. ngbDropdownToggle
  13. >
  14. Dropdown
  15. </a>
  16. <div ngbDropdownMenu aria-labelledby="dropdownMenu">
  17. <a ngbDropdownItem href="#">Item 1</a>
  18. <a ngbDropdownItem href="#">Item 2</a>
  19. <a ngbDropdownItem href="#">Item 3</a>
  20. </div>
  21. </li>
  22. </ul>
  23. </nav>

字符串

展开查看全部
pqwbnv8z

pqwbnv8z3#

如果你想你的导航栏切换,看看这个;

  1. <nav class="navbar navbar-dark bg-inverse">
  2. <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">
  3. &#9776;
  4. </button>
  5. <div class="collapse navbar-toggleable-xs" id="navExample">
  6. <ul class="nav navbar-nav">
  7. <li class="nav-item">
  8. <a href="#" class="nav-item nav-link">First link</a>
  9. </li>
  10. <li class="nav-item">
  11. <a href="#" class="nav-item nav-link">Second link</a>
  12. </li>
  13. </ul>
  14. </div>

字符串
如果你只想在你的导航栏中有一个菜单,在官方网站的例子应该工作;

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


确保你的html文件包含bootstrap(我使用bootstrap 4)。

展开查看全部

相关问题