带有引导程序 4 + Angular Material 8 网格的 Angular 8 项目答案

【问题标题】：Angular 8 project with bootstrap 4 + Angular Material 8 grid带有引导程序 4 + Angular Material 8 网格的 Angular 8 项目
【发布时间】：2020-03-07 12:39:45
【问题描述】：

我使用 angular CLI 创建了 angular 8 项目。我添加了“@angular/material”：“^8.2.3”和“bootstrap”：“4.3.1”。我已对 style.scss 进行了以下导入

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/badge";

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

我在 app-component.html 中添加了一个简单的例子

<div class="container">
  <div class="row">
    <div class="col-4">
      <p>dfdf</p>
    </div>
    <div class="col-4">
      <p>dfdf</p>
    </div>
    <div class="col-4">
      <p>dfdf</p>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <p>dfdf</p>
    </div>
    <div class="col">
      <p>dfdf</p>
    </div>
    <div class="col">
      <p>dfdf</p>
    </div>
  </div>
</div>

我希望两行的输出相同，但第一行中断，这是我没想到的，第二行均匀分布容器中的列。我完全误解了 col-x 的概念吗？ Col break（来自 Chrome OSX 的屏幕截图）

在此先感谢，如果这只是一个菜鸟的错误，我们深表歉意。

【问题讨论】：

您所拥有的应该与您描述的完全一致在样式中被继承导致其他情况。如果我们看不到重现问题的方法，就很难排除故障。

标签： css angular bootstrap-4 angular-material

【解决方案1】：

问题是 style.scss 中缺少 @import "~bootstrap/scss/reboot"; 的导入。它将在引导程序和材料之间引入一些其他冲突的样式。问题显示here，并给出了解决方法。

【讨论】：