html - Flex 不会像示例中所示那样进入

Question

我只是想在 PrimeNG Flex 上使用 Nested flex 的修改示例通过使用下面的代码:

<h3>Nested</h3>
<div class="p-grid nested-grid">
    <div class="p-col-8">
        <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 class="p-col-12">
                <div class="box">12</div>
            </div>
        </div>
    </div>
    <div class="p-col-4">
        <div class="box box-stretched">4</div>
    </div>
</div>

但是，col div 的总大小不是 12，而是 11，如果总 p-col 数为 12 或更多，元素将换行到我不想要的下一行。另一方面，我查看了所有主要的 div 和 body paddings 和 margins 但没有问题。我认为 p-cols 的填充不会导致这个问题，它们的填充也在 0-5 px 范围内。知道如何解决这个问题吗？

Answer 1

站点中的示例显示有点像这样

我不认为你需要'p-grid nested-grid'

<div class="p-grid">
<div class="p-col-8">
    <div class="p-grid">
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-12">
            12
        </div>
    </div>
</div>
<div class="p-col-4">
    4
</div>