使用PrimeNG Grid的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>