Question

我只是想通过使用以下代码在PrimeNG Flex上使用嵌套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 divs的总大小不是12，而是11，并且如果p-col的总数是12或更大，则元素将换行到我不希望的下一行。另一方面，我查看了所有主要的div，正文填充和边距，但这没有问题。我认为p-col的填充不会导致此问题，它们的填充也是0-5像素范围。知道如何解决此问题吗？

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>

Answer 2

删除第一个nested-grid元素中的div类，如示例所示，不需要它。

<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>
</div>

Answer 3

要将nested-grid类保留在第一个div元素中，可以将以下内容添加到全局styles.css文件中进行修复。

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

这将阻止col div像总大小是11而不是12一样起作用，并可以使用primefaces网站https://www.primefaces.org/primeng/#/flexgrid

上显示的所有示例

Flex无法如示例中所示

3 个答案: