弹性网格对p-col-# primeng Angular 5不起作用

Question

我使用的是angular的primeNG

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相同的值，但它不起作用)

有什么想法吗？

谢谢Rahav

Answer 1

它是在我的Angular6项目中工作。

1. 安装PrimeNG和PrimeFlex

npm install primeng --保存npm install primeflex --将

• 添加样式保存到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>

Answer 2

使用"grid“而不是"p-grid"，lib文件中的类名发生了变化。

Answer 3

在Angular 7中，PrimeNG PrimeFlex也遇到了同样的问题。

在styles.css文件中添加了以下内容以修复该问题。

 * {
  -webkit-box-sizing: border-box;
}