Question

我在Bootstrap链接中遇到问题，该链接通常进入HTML文件：

<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>

那是组件的代码。

Answer 1

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

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

Answer 2

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

npm install --save bootstrap

安装引导程序后，将此行添加到您的src / style.css文件中：

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

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

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

2 个答案: