我的 Bootstrap CSS 链接对我不起作用？答案

【问题标题】：My Bootstrap CSS link doesn't work for me?我的 Bootstrap CSS 链接对我不起作用？
【发布时间】：2019-05-27 16:32:55
【问题描述】：

我对通常进入 HTML 文件的 Bootstrap 链接有疑问：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

它使我的导航栏看起来像：

（我需要至少 10 个声望才能发布图片，所以我必须发布直接链接） https://i.imgur.com/dANnzzG.png

在我删除链接后：

（我需要至少 10 个声望才能发布图片，所以我必须发布直接链接） https://i.imgur.com/EpnZCeK.png

但是正如您在 2 图中看到的那样，如果我没有链接，导航栏下方的内容将不再处于正确的位置。请帮忙。

编辑：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col-6">
      <app-list-employees></app-list-employees>
</div>
  <div class="col-6">
     <div><app-book-employee></app-book-employee></div>
     <p></p>
    <div><app-calendar-books></app-calendar-books></div>
  </div>
</div>

这是组件的代码。

【问题讨论】：

这是如何将 boostrap 导入 angular:stackoverflow.com/questions/50559810/…
maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css 试试这个
当您不使用链接时，似乎引导程序工作正常，第二张图像中应用于导航栏的样式来自引导程序。请提供更多 HTML，以便我们找到问题所在。您可以使用stackblitz.com 创建示例

标签： css angular bootstrap-4

【解决方案1】：

在项目的根目录中是 angular.json 文件。如果您想使用 CDN 进行引导（就像您现在使用的那样），请在此文件中查找样式对象（可能在第 25 和 35 行之间），您可以在其中添加您的链接。它应该是这样的：

 "projects": {
      "architect": {
        "build": {
          "styles": [
            "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          ]
        }
      }
    }

【讨论】：

您遇到什么错误？你能提供更多代码让我看看吗？
我得到了与图片中相同的样式。我编辑了更多代码。

【解决方案2】：

如果您在应用程序中使用 Angular 6+，最好建议您通过 npm 安装引导程序，如下所示：

npm install --save bootstrap

安装 bootstrap 后，在 src/style.css 文件中添加这一行：

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

这将为您提供所有引导程序样式，因此无需将其添加到您的 index.html 文件或 angular.json 文件中

【讨论】：