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

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

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>

垂直对齐的静态/自举问题

1 个答案: