angular - 引导样式不将 div 放在行中

Question

我在我的角度应用程序中使用引导程序。我在我的 Index.html 中有它，如下所示：

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

我的 Package.json 中也有这个

"private": true,
  "dependencies": {
    "@angular/animations": "^9.1.2",
    "@angular/cdk": "^9.2.1",
    "@angular/common": "~9.1.2",
    "@angular/compiler": "~9.1.2",
    "@angular/core": "~9.1.2",
    "@angular/forms": "~9.1.2",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "~9.1.2",
    "@angular/platform-browser-dynamic": "~9.1.2",
    "@angular/router": "~9.1.2",
    "bootstrap": "^4.4.1",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

尽管如此，当我在我的应用程序中使用下面的代码时，每一列都会进入不同的行而不是同一行。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

下面是我在我的应用程序中得到的屏幕截图：

任何帮助将不胜感激。

标签： angulartypescriptbootstrap-4

Answer 1

您需要@import '~bootstrap/dist/css/bootstrap.min.css';代替styles.cssindex.html 文件中的链接标签（重要）

同样在styles部分中，angular.json您需要将 bootstrap.css 定义为

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

并确保您安装 bootstrap 4 以使用col-sm类。

angular.json我在项目中的示例