基于HTML+TWIG+Bootstrap3如何实现同组卡片字段高度一致

使用HTML和Twig进行开发，通过PHP调用获取数据填充到多个卡片的不同字段中，存在字段及所属卡片尺寸无法统一的问题。

具体需求 #

每个字段的高度等于同组内该字段的最大高度：

• 所有Contratto字段高度匹配同组内的最高值
• 所有JSer字段高度匹配同组内的最高值
• 所有Azienda字段高度匹配同组内的最高值
• 核心解决Note字段适配问题，单张卡片展示正常，但多张卡片并行时会打乱布局

异常效果展示 #

初始实现代码 #

{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header  with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="shadow-box">
                        <div class="box-header  with-border">
                            <h3 class="box-title" style="color: #ff000f">Avviso</h3>
                        </div>
                        <div class="box-body">
                            <p><b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}</p>
                            <p><b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}</p>
                            <p><b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}</p>
                            <p><b>Note</b>: {{ alert.getJob().getNote() }}</p>
                        </div>

                        {% if alert.getUtente() is not null %}
                            <div class="box-footer" style="text-align: left">
                                <p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
                            </div>
                        {% endif %}

                        <div class="box-footer">
                            <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
                                Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

调整行列布局后的迭代代码 #

{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header  with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="shadow-box">
                        <div class="box-header  with-border">
                            <h3 class="box-title" style="color: #ff000f">Avviso</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <b>Note</b>: {{ alert.getJob().getNote() }}</p>
                                </div>
                            </div>
                        </div>

                        {% if alert.getUtente() is not null %}
                            <div class="box-footer" style="text-align: left">
                                <p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
                            </div>
                        {% endif %}

                        <div class="box-footer">
                            <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
                                Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

最终可行解决方案 #

经过多次调试，通过统一整行高度而非单个字段高度的方式实现了符合要求的效果，代码如下：

//CSS in head
.alertProperties {
   padding-left:0px !important;
}

//Code
{% if alerts|length > 0 %}
    <div class="box box-danger">
        <div class="box-header with-border">
            <h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp; I TUOI AVVISI ({{ alerts|length }})</h3>
        </div>
        <div class="box-body">
            {% for alert in alerts %}
                {% if loop.index % 5 == 0 or loop.first %}                                   
                    <div class="row">
                {% endif %}
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <div class="box-header with-border"><h3 class="box-title" style="color: #ff000f">Avviso</h3></div>
                            <div class="box-body" style="border-left: 1px solid #00ACDF !important">
                                <div class="col-sm-12 alertProperties">
                                    <b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
                                </div>
                                <div class="col-sm-12 alertProperties">
                                    <b>Note</b>: {{ alert.getJob().getNote() }}</p>
                                </div>

                                {% if alert.getUtente() is not null %}
                                    <div class="box-footer" style="text-align:left;">
                                        <div class="col-sm-12 alertProperties">
                                            <b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}
                                        </div>
                                    </div>
                                {% endif %}

                                <div class="box-footer">
                                    <div class="col-sm-12">
                                        <a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
                                            Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                {% if (loop.index % 4 == 0 or loop.last) %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {# </div> #}
    </div>
{% endif %}

内容的提问来源于stack exchange，提问作者alesssz