Question

我在Angular5项目中使用Bootstrap4制作了一个非常简单的导航栏，导航栏看起来像这样：

    <nav class="navbar navbar-expand-sm bg-success ">        
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>        
    </nav>

根据bootstrap文档和我也尝试过此代码的外部HTML文件，当屏幕大小因为navbar-expand-sm Bootstrap4类而变小时，导航栏应该会扩展。然而，在我的项目中情况并非如此，导航栏在每个屏幕大小都保持扩展，如下所示：

因为它只在Angular5项目中起作用，我怀疑Angular5项目会干扰Bootstrap4

下面你可以看到我的角项目的结构。只有标题组件和路由器插座非常简单，在这种情况下输出主组件：

问题：

为什么我的导航栏即使在大屏幕尺寸下也会扩展，我该如何解决？

Answer 1

添加一个按钮，负责使用 class=navbar-toggler 进行折叠和展开。

使用类 collapse and navbar-collapse 设置 div 中的所有链接。按钮的数据目标应该是div的id。

示例如下：

<nav class="navbar navbar-expand-sm">
  <button
    class="navbar-toggler btn"
    data-target="#navbarCollapse"
    data-toggle="collapse"
    type="button"
  >
    btn
  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
          <ul class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="#">Link 1</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link 2</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link 3</a>
              </li>
          </ul> 
       </div>
    </div>
</nav>

Answer 2

导航扩展的原因不起作用，因为您需要将以下库添加到package.json：

的jQuery
Popper.js

请为jQuery＆amp;添加JS文件popper.js到你的angular cli JSON文件，所以它们可以包含在angular。

bootstrap4 navbar-expand-不在angular5项目中工作

问题：

2 个答案: