如何在角度中使用引导程序和 Ionic答案

【问题标题】：How to use bootstrap along with Ionic in angular如何在角度中使用引导程序和 Ionic
【发布时间】：2020-08-04 18:14:37
【问题描述】：

我已经使用 Ionic 框架创建了一个 Angular 项目，但我也想使用 Bootstrap，我如何使用它，

我已经安装了引导程序并更改了 angular.json 文件，如下所示：

        "styles": [
          {
            "input": "src/assets/styles/theme/variables.scss"
          },
          {
            "input": "src/assets/styles/global.scss"
          },
          {
            "input": "node_modules/bootstrap/dist/css/bootstrap.min.css"
          }
        ],

像上面这样更改后，我可以使用 Bootstrap 组件，但它们没有响应，

我的 HTML：

     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-secondary">Secondary</button>
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-light">Light</button>
     <button type="button" class="btn btn-dark">Dark</button>
     <button type="button" class="btn btn-link">Link</button>

我的输出：

即按钮占据全屏宽度

我觉得Bootstrap在添加Ionic框架后没有响应纠正我如果我错了，我不知道如何进一步进行，任何人都可以帮助我。

如果我在 variable.scss 中注释以下所有文件，那么引导程序工作正常，但我想同时使用引导程序和 Ionic

      /* Core CSS required for Ionic components to work properly */
      @import "~@ionic/angular/css/core.css";

      // /* Basic CSS for apps built with Ionic */
      @import "~@ionic/angular/css/normalize.css";
      @import "~@ionic/angular/css/structure.css";
      @import "~@ionic/angular/css/typography.css";
      @import '~@ionic/angular/css/display.css';

      /* Optional CSS utils that can be commented out */
      @import "~@ionic/angular/css/padding.css";
      @import "~@ionic/angular/css/float-elements.css";
      @import "~@ionic/angular/css/text-alignment.css";
      @import "~@ionic/angular/css/text-transformation.css";
      @import "~@ionic/angular/css/flex-utils.css";

【问题讨论】：

标签： angular ionic-framework bootstrap-4

【解决方案1】：

您可以使用ng-bootstrap

Tutorial

【讨论】：

【解决方案2】：

Bootstrap with ionic ?!，对我来说似乎不太好，ionic 为您提供了大量的组件和响应性网格，如果您想要更多组件，您可以自己制作，如果您坚持，我建议您这样做在使用 bootstrap 时，请尝试使用 ng-bootstrap 或 ngx-bootstrap ，同样，我不建议将 bootstrap 与 ionic 一起使用，这是一种不好的做法

【讨论】：

他问的是一个问题，而不是你对好的和坏的做法的看法。如果您想使用 ng-bootstrap 或 ngx-bootstrap，您需要包含引导程序的 css 以使组件正确显示。所以无论如何你都需要解决问题中的问题。