задача statamic / bootstrap с вертикальным выравниванием - PullRequest
Новая
       34

задача statamic / bootstrap с вертикальным выравниванием

0 голосов
/ 20 марта 2019

я новичок о statamic, я пытаюсь решить этот код: 

<div class="container">
    <div class="intro">
        <div class="row">
            <div class="col-md-12">
                <h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
                <div class="row-project-box row">
                    {{ relate:section_three_categories }}
                    {{ entries }}
                    <div class="col-project-box col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ url }}" class="project-box">
                            <div class="project-box-inner">
                                <h5>{{ title }}</h5>
                            </div>
                        </a>
                    </div>
                    {{ /entries }}
                    {{ /relate:section_three_categories }}
                </div>
                <a href="#" class="h5 link-arrow text-white">view all projects <i class="icon icon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

код обеспечивает это: enter image description here

я хочу выровнять эти поля
direzionale operativo dirigenziale не по горизонтали, а по вертикали, вот так: 

direzionale
operativo
dirigenziale

Я думаю, что это конфигурация начальной загрузки, но я не знаю о мире статами, кто-нибудь может мне помочь?большое спасибо

1 Ответ

1 голос
/ 20 марта 2019

Проблема здесь заключается в том, что вы используете отзывчивые точки останова на своих столбцах, поэтому, если вы хотите устанавливать флажки один под другим все время, вам нужно установить .col-project-box, всегда добавляя этот класс на полную ширину col-12 и установите центр горизонтального выравнивания .row-project-box, добавив к нему этот класс justify-content-center. 

<div class="container">
<div class="intro">
    <div class="row">
        <div class="col-md-12">
            <h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
            <div class="row-project-box row justify-content-center">
                {{ relate:section_three_categories }}
                {{ entries }}
                <div class="col-project-box col-12">
                    <a href="{{ url }}" class="project-box">
                        <div class="project-box-inner">
                            <h5>{{ title }}</h5>
                        </div>
                    </a>
                </div>
                {{ /entries }}
                {{ /relate:section_three_categories }}
            </div>
            <a href="#" class="h5 link-arrow text-white">view all projects <i class="icon icon-chevron-right"></i></a>
        </div>
    </div>
</div>

...