引导样式不将 div 放在行中答案

【问题标题】：bootstrap styling not putting the div in rows引导样式不将 div 放在行中
【发布时间】：2020-08-05 00:29:32
【问题描述】：

我在我的 Angular 应用程序中使用引导程序。我在我的 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>

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

任何帮助将不胜感激。

【问题讨论】：

你需要多少行

标签： angular typescript bootstrap-4

【解决方案1】：

您需要 @import '~bootstrap/dist/css/bootstrap.min.css'; 到 styles.css 而不是 index.html 文件中的链接标记（重要）

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

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

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

我在项目中的示例angular.json

【讨论】：

【解决方案2】：

请将您的班级“col-sm”替换为“col-sm-4”。
您需要提供所需的列数（带有适当 .col-- 类的标签）

【讨论】：

我刚刚将 col-sm" 替换为 "col-sm-4" 并且仍然得到相同的结果。
请进入浏览器开发工具并检查元素并检查引导 css 类是否正确显示。

【解决方案3】：

从 npm 安装 Bootstrap 4 和 jQuery

$ npm install --save bootstrap jquery

打开 angular.json 文件，将 Bootstrap CSS 和 JS 文件以及 jQuery 的文件路径添加到构建目标下的样式和脚本数组中。

 "architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

如果您需要三行，请使用 <div class="col-sm-4"> 而不是 <div class="col-sm">

如果您需要自定义行，请参阅此link。

【讨论】：