angular - 弹性网格不适用于 p-col-# primeng Angular 5

Question

我正在使用 primeNG 进行 Angular 分析

https://www.primefaces.org/primeng/#/flexgrid

当我尝试这个的时候

<div class="p-grid">
<div class="p-col-6">
<div class="box">6 </div>
</div>
<div class="p-col-6">
<div class="box">6 </div>
</div>

</div>

盒子是在彼此的顶部而不是彼此相邻的我跑

npm install primeflex --save

并添加了

"node_modules/primeflex/primeflex.css"

到 angular.json

似乎与 primeflex.css 相关

p-col 类工作正常，但 p-col-#(p-col-1、p-col-2 等)未按预期工作

这是 p-col 的值

-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
padding: 0.5em;

这是 p-col-# 的值

-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0.5em;

例如，如果我将 p-col-# 的填充更改为 0，那么它可以工作，但我没有填充..(我试图将 p-col-# 更改为与 p-col 相同的值，但它不起作用)

有什么想法吗？

谢谢拉哈夫

Answer 1

它在我的 Angular6 项目中工作。

1. 安装 PrimeNG 和 PrimeFlex

   npm install primeng --save
   npm install primeflex --save
   

2. 给angular.json添加样式

   "./node_modules/primeng/resources/primeng.css",
   "./node_modules/primeflex/primeflex.css"
   

app.component.html

<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>