bootstrap类不适用于角度应用程序中的导航栏组件

Question

我正在将bootstrap 3.4.1与angularcli 6.0.8一起使用，但是当我运行ng服务时，我的网页没有显示我确定的bootstrap类。

我已经尝试更新引导程序版本并尝试新类仍然无法正常工作。

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Dating App</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Matches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Lists</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Messages</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Username">
      <input class="form-control mr-sm-2" type="password" placeholder="Password">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
    </form>
  </nav>
</div>

in angular.json

"styles": [ "src/styles.css" ],
"scripts": []

在src / styles.css中]

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

我正在将bootstrap 3.4.1与angularcli 6.0.8一起使用，但是当我运行ng服务时，我的网页没有显示我确定的bootstrap类。我已经尝试更新引导程序版本并尝试新的类...

Answer 1

您使用的是普通CSS，因此@import语句由浏览器执行。我猜想，如果您打开“开发工具”的“网络”选项卡，则会看到有关bootstrap.min.css文件的讨厌的404。