statamic / bootstrap 垂直对齐问题

Question

我是统计新手，我尝试解决此代码：

<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

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

Answer 1

这里的问题似乎是您在列上使用了响应式断点，因此，如果您想一直将框设置在另一个下方，则必须始终将 .col-project-box 设置为全角添加此 class col-12 并设置 .row-project-box水平对齐中心添加这个 class 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>

statamic / bootstrap 垂直对齐问题

statamic / bootstrap problem with vertical align

php

twitter-bootstrap

laravel

statamic

bootstrap-4