我已经使用角度CLI创建了角度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的屏幕转储）

如果这只是菜鸟的错误，请多谢。