css - 带有 bootstrap 4 + Angular Material 8 网格的 Angular 8 元素

Question

我已经使用 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 的屏幕转储)

提前致谢，如果这只是菜鸟的错误，我们深表歉意。

Answer 1

问题是 style.scss 中缺少 @import "~bootstrap/scss/reboot"; 的导入。它将介绍 bootstrap 和 material 之间的其他一些冲突样式。问题显示here并给出了解决方案。