Angular4 引入bootstrap部分樣式不生效

當(dāng)前情況是 柵格生效了，背景條等不生效。問題出在哪呢？
這不會(huì)又是一個(gè)無解的提問吧

目標(biāo)樣式：

當(dāng)前樣式：

1.app.component.html

<app-navbar></app-navbar>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
      <div class="row">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>

<app-footer></app-footer>

2.navbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">導(dǎo)航條</a>
    </div>
  </div>
</nav>

3.angular-cli.json

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

4.packge.json

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