垂直对齐的静态/引导问题

Question

我是关于 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>

代码提供了这个：

我想对齐这些框
direzionale operativo dirigenziale 不是水平的，而是垂直的，如下所示：

direzionale
operativo
dirigenziale

我认为这是一个引导配置，但我不了解静态世界 任何人都可以帮助我吗？ 非常感谢

Answer 1

这里的问题似乎是您在列上使用了响应式断点， 因此，如果您想始终将框设置在另一个下方，则必须将.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>