Bootstrap 4导航栏无法使用角度5

Question

嗨，我正在尝试使用角度项目添加引导程序，并且样式没有在浏览器中反映出来。

  The details are as below.
Versions:
Angular CLI: 1.7.3
Node: 9.7.1
OS: win32 x64
Angular: 5.2.8

使用angular cli安装bootstrap和jquery

"bootstrap": "^4.0.0"
"jquery": "^3.3.1"

在.angular-cli.json中添加如下

  "styles": [        
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

下面是我的html中的代码。

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
         <span class="navbar-brand">Angular + Bootstrap</span>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">
            Link <span class="sr-only">(current)</span>
          </a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown" dropdown> <!-- {1} -->
              <a dropdownToggle role="button"> <!-- {2} -->
                Dropdown <span class="caret"></span></a>
              <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
              </ul>
          </li>
      </ul>
  </div>
</nav>

我在浏览器中获取视图如下，并且没有在浏览器控制台中收到任何错误。 在浏览器中输出

感谢您的帮助。

Answer 1

您已安装bootstrap 4并使用bootstrap 3版本导航条代码。 这里是bootstrap 4 navbar的示例代码。在最新的bootstrap 4版本中已经更改了一些类。

<nav class="navbar navbar-expand-sm bg-light">
  <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>

有关更多信息，请参阅此链接

Answer 2

尝试这个

转到app文件夹 - > src

打开style.css并粘贴下面的代码

@import“~bootstrap / dist / css / bootstrap.css”;