Foundation for Email v2.2 中 large-offset-n 的意外结果

Question

我想在屏幕中央的大屏幕上设置四个单列宽度的列。我正在使用 large-offset-4 将这些列偏移相当于 4 列，但这些列的位置向右偏移了很多，第一列比单个列应该大。

我是电子邮件基础的运行 v2.2.1，用 Inky 编写的 Sass 版本我尝试了很多东西，但在第一列的图像上似乎有一些额外的边距我无法在 sass 中覆盖它。在小屏幕上，一切看起来都符合预期，但在大屏幕上，列显示不正确。根据 _grid.scss:101，th.large-1 的宽度应为 32.33333px，但第一列显示为 126.672px，所有其他列显示为 59px。

<wrapper style="background: #ffffff">
<container>
    <row>
        <columns small="12" large="12" valign="middle" style="background: #ffffff;">
            <h2 class="text-center">Connect with us</h2>
        </columns>
    </row>
    <row>
        <columns small="2" large="1"  style="background: #ffffff;" class="large-offset-4 small-offset-2">
            <a href="#" target="_blank"><img src="assets/img/facebook.png" alt="Facebook" title="Like us on Facebook." style="max-width: 40px; height: auto;"></a>
        </columns>
        <columns small="2" large="1" style="background: #ffffff;" class="">
            <a href="#" target="_blank"><img src="assets/img/twitter.png" alt="Twitter" title="Follow us on Twitter." style="max-width: 40px; height: auto;"></a>
        </columns>
        <columns small="2" large="1" style="background: #ffffff;" class="">
            <a href="#" target="_blank"><img src="assets/img/youtube.png" alt="YouTube" title="Find us on YouTube." style="max-width: 40px; height: auto;"></a>
        </columns>
        <columns small="2" large="1" style="background: #ffffff;" class="">
            <a href="#" target="_blank"><img src="assets/img/instagram.png" alt="Instagram" title="Follow us on Instagram." style="max-width: 40px; height: auto;"></a>
        </columns>                                  
    </row>
    <row>
        <columns small="1" large="1" valign="middle" class="large-offset-3">
            <p><a href="tel:1800067066"><img src="assets/img/phone.png" style="max-width: 35px; height: auto;"></a></p>
        </columns>
        <columns small="5" large="2" valign="middle">
            <p class="text-center"><a href="tel:1800067066">1800 067 066</a></p>
        </columns>
        <columns small="1" large="1" valign="middle">
            <p class="text-right"><a href="mailto:"><img src="assets/img/email.png" style="max-width: 35px; height: auto;"></a></p>
        </columns>
        <columns small="4" large="2" valign="middle">
            <p class="text-center"><a href="mailto:">Email us</a></p>
        </columns>
    </row>
</container>

第 9 - 22 行应该生成四列，它们是单列宽，偏移 4 列（基本上将它们集中在十二列网格上）每列应该包含一个小图像（最大宽度为 40 像素）包裹在标签中。相反，第一列大约有 4 列宽，其内容位于屏幕中央，然后所有其他列的宽度约为 50px，位于第一列的右侧。

Answer 1

如果我没记错的话，该行总共需要包含 12 列（包括任何偏移量）。

所以 .large-1*2 + .large-2*2 + .large-offset-3 = 9 列

试着把右边的最后 3 列空列 .large-3 到 = 12

Foundation for Email v2.2 中 large-offset-n 的意外结果

Unexpected results for large-offset-n in Foundation for Email v2.2

html-email

zurb-foundation