Foundation For Emails Responsive Email Inliner V2 打破了 TWIG 布局

Question

我正在使用 Foundation For Emails Responsive Email Inliner V2，可在以下位置找到：http://foundation.zurb.com/emails/inliner-v2.html

我的 TWIG 代码有问题：

<table class="row collapse">
    <tbody>
    <tr>
    {% for alternative in alternatives %}
        <th class="small-6 large-4 columns">
            <table>
                <tr>
                    {{ alternative.name }}
                </tr>
            </table>
        </th>
    {% endfor %}
    </tr>
    </tbody>
</table>

变成

{% for alternative in alternatives %} {% endfor %}
<table class="row collapse" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
    <tbody>
    <tr style="padding: 0; text-align: left; vertical-align: top;">
        <th class="small-6 large-4 columns" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 0; padding-right: 0; text-align: left; width: 193.33333px;">

            {{ alternative.name }}
            <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                <tbody>
                <tr style="padding: 0; text-align: left; vertical-align: top;"></tr>
                </tbody>
            </table>
        </th>
    </tr>
    </tbody>
</table>

如您所见，for-Construct 位于 table-Tag 的顶部，因此在内联后它不会环绕在 th-Tag 周围。

有人知道该怎么做吗？快把我逼疯了 ;)

Answer 1

首先，您的 html 代码格式错误：

                                <table class="row collapse">
                                <tbody>
                                <tr>
                                {% for alternative in alternatives %}
                                    <th class="small-6 large-4 columns">
                                        <table>
                                            <tr>
                                                <!-- add here td or th tags -->
                                                <td>
                                                  {{ alternative.name }}
                                                </td>
                                            </tr>
                                        </table>
                                    </th>
                                {% endfor %}
                                </tr>
                                </tbody>
                            </table>

Answer 2

通常与代码中的一些错误有关：

你也可以使用原来的： http://foundation.zurb.com/emails/inliner.html

Foundation For Emails Responsive Email Inliner V2 打破了 TWIG 布局

Foundation For Emails Responsive Email Inliner V2 breaks TWIG Layout

html

email

twig

zurb-foundation