Question

我将跟随本教程： https://codeburst.io/getting-started-with-angular-7-and-bootstrap-4-styling-6011b206080

我用cli刚生成了一个新的角度项目。包括路由，scss样式表。

我已经执行了npm install bootstrap jquery，并包括了以下内容：

angular.json

"projects": {
"myproject": {
  ...,
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...,
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
...

bootstrap样式表包含在styles.scss中，因此我可以根据需要重写变量：

styles.scss

@import '~bootstrap/scss/bootstrap.scss';

然后我添加了一个导航栏，如下所示：

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand">Angular Router</a>
    <ul class="nav navbar-nav" routerLinkActive="active">
        <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
</nav>

投放页面时，其呈现方式如下：

链接可见的唯一原因是我选择了它们。它们的字体似乎是白色的。导航栏本身未按我期望的方式呈现。

我想念什么？我在控制台或开发人员工具中看不到任何错误。

编辑：该问题被标记为how to add bootstrap in angular 6的重复项。但是，事实并非如此，因为正如您从我发布的代码中看到的那样，由于我已经按照该答案中的步骤进行操作，所以它仍然无法正常工作。

编辑2：控制台中没有警告或错误。它甚至表明找到了样式，所以我怀疑这是安装/导入问题。

Answer 1

问题不是由于您的配置，而是由于HTML的结构和导航栏所需的CSS的缺失。

这是您的导航栏html的外观：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
  </div>
</nav>

例如，请参见stackblitz，确保您将屏幕放大到足以显示内容的位置，或者确保https://angular-xbbtq9.stackblitz.io/处于全屏状态。（注意，工作人员位于顶部，您的人员位于底部）

Answer 2

我有一个类似的问题，我确保将bootstrap.min.css文件放置在angular.json文件中的styles.css文件旁边，并将bootstrap.css文件导入styles.css文件中。这解决了这个问题。

@import "../node_modules/bootstrap/dist/css/bootstrap.css";在styles.css文件中添加此行代码，这应该可以解决您的问题。但是，请确保此代码适用于Bootstrap 3.4.1版本。我使用的是相同版本，并且能够呈现Bootstrap类。

Answer 3

您需要将Bootstrap的CSS添加到angular.json：

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Answer 4

您的style.scss文件中的文件使用导入

@import "../node_modules/bootstrap/scss/bootstrap.scss"

并删除 "node_modules/bootstrap/scss/bootstrap.scss"文件中的angular.json

Answer 5

通过[https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap[1]

重新安装引导程序

安装依赖项：

npm install bootstrap --save npm install jquery-保存 npm install popper.js-保存

当心popper.js。 Bootstrap使用此库。但是，您必须精确地运行npm install popper.js --save，因为popper是npm分发的另一个js库。

将依赖项集成到您的项目中

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

最后，打开src \ styles.css并添加：

@import“〜bootstrap / dist / css / bootstrap.css”;

检查bootstrap插件在包json文件中是否可用。

Answer 6

如果您使用.Net Core和Angular 8+，则可能需要添加

如果Bootstrap不会在各个视图之间“粘连”，则可以将其添加到根目录/ src /中的styles.css顶部

@import“ ../ node_modules / .staging / bootstrap-599b1c4f / dist / css / bootstrap.min.css”;

这将确保为每个组件正确加载Bootstrap（当我从Add或SingleBook组件返回到其他组件时，我遇到了Bootstrap样式关闭的麻烦，这已解决了问题）

（'-55b1c4f'名称是唯一的，在您的安装中会有所不同，因此请进行相应更改）

引导不渲染角7

6 个答案: