Angular4 引入bootstrap部分样式不生效

Question

当前情况是 栅格生效了，背景条等不生效。问题出在哪呢？
这不会又是一个无解的提问吧

目标样式：

当前样式：

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="#">导航条</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",

Answer 1

不要看bootstrap4中文网，上边的和最新的bootstrap不一致，导致你可能写了过时的代码（你的库应该是最新的）
要看bootstrap官网原版