带自举4+角材料8栅格的角8方案

Question

我已经创建了在角8项目与角CLI。我增加了“@转角/材料”："^8.2.3“和”引导“："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的概念？Col断裂 ( Chrome中的Screendump)

谢谢，如果这只是个新手的错误，我很抱歉。

Answer 1

问题是缺少了@import "~bootstrap/scss/reboot";在style.scss中的导入。它将引进其他相互冲突的风格之间的鞋带和材料。给出了这里问题，并给出了相应的解决方案。