bootstrap стиль, не помещающий div в ряды

Question

Я использую bootstrap в моем приложении angular. У меня есть это в моем индексе. html примерно так:

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

У меня также есть это в моем пакете. 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>

Ниже приведен снимок экрана с тем, что я получаю в своем приложении:

любая помощь будет оценена.

Answer 1

Вам нужно от @import '~bootstrap/dist/css/bootstrap.min.css'; до styles.css вместо тега ссылки в индексе. html файл ( ВАЖНО )

Также в разделе styles в angular.json вам нужно определил ваш bootstrap. css как

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

И обязательно установите bootstrap 4 для использования col-sm класса.

Мой образец angular.json в проекте

Answer 2

установите Bootstrap 4 и jQuery из npm

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

, если вы нужны пользовательские строки, ссылающиеся на эту ссылку .

Answer 3

Пожалуйста, замените ваш класс "col-sm" на "col-sm-4".
вам нужно указать желаемое количество столбцов (теги с соответствующими .col- - классы)