使用PrimeNG网格的PrimeNG嵌套P面板

Question

我正在尝试在一个父面板中实现4个小面板

<div class="ui-g-12 ui-g-nopad">
      <p-panel header="Statistics">
        <div class="ui-g-6">
          <p-panel header="Clients">
            Total clients: {{clients.length}}
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Products">
            Total products: <!--TODO-->
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Orders">
            Total orders: <!--TODO-->
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Vendor Orders">
            Total vendor orders: <!--TODO-->
          </p-panel>
        </div>
      </p-panel>
    </div>

然而，结果并不是我想要的：

​

我去掉了所有的ui-g-6，得到：

​

有什么建议如何实现第一个布局，但在父面板内，如第二张图片？

谢谢

Answer 1

当然，将内部面板包装在一个新的网格中(您已经用面板创建了一个新的容器，所以您需要一个新的网格)。

<div class="ui-g-12 ui-g-nopad">
    <p-panel header="Statistics">
        <div class="ui-g">
            <div class="ui-g-6">
                <p-panel header="Clients">
                    Total clients: {{clients.length}}
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Products">
                    Total products:
                    <!--TODO-->
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Orders">
                    Total orders:
                    <!--TODO-->
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Vendor Orders">
                    Total vendor orders:
                    <!--TODO-->
                </p-panel>
            </div>
        </div>
    </p-panel>
</div>