Flex не плавник, как показано в примерах - PullRequest
Новая
       7

Flex не плавник, как показано в примерах

0 голосов
/ 20 декабря 2018

Я просто хочу использовать модифицированный пример Nested flex на PrimeNG 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>

Однако столбцы делятся на общий размерне 12, а 11, и если общее число p-col равно 12 или более, элементы переносятся в следующую строку, которая мне не нужна.С другой стороны, я смотрю на все основные элементы div, отступы и поля тела, но с этим проблем нет.Я думаю, что отступы p-cols не вызывают этой проблемы, и их отступы также находятся в диапазоне 0-5 пикселей.Есть идеи как решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Удалите класс 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>
0 голосов
/ 07 февраля 2019

Чтобы сохранить класс nested-grid в первом элементе div, вы можете добавить следующее в свой глобальный файл styles.css, чтобы исправить это. 

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

Это остановит действие col div.как если бы общий размер был 11 вместо 12 и работал со всеми примерами, показанными на вебсайте простых лиц https://www.primefaces.org/primeng/#/flexgrid

0 голосов
/ 20 декабря 2018

пример на сайте показывает что-то вроде этого

я не думаю, что вам нужна '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>

...