将样式应用于 Zurb 电子邮件基础中的列答案

【问题标题】：Applying style to columns in Zurb Email Foundations将样式应用于 Zurb 电子邮件基础中的列
【发布时间】：2019-04-25 18:42:55
【问题描述】：

我希望有人能指出我在使用 Sass 版本时如何更改 Zurb Foundation for Emails 2 中列的背景颜色的正确方向。有没有办法为列或行设置背景颜色？我尝试了多种方法，但由于某种原因无法将样式应用于列或行。身体， html,

        h4.topline {
      text-align: center;
      color: rgb(0, 255, 85);
      background: red;
    }
    p.value {
      text-align: center;
      color:indigo;
      font-weight: bold;
      background: greenyellow
    }
    div.test{
        background: greenyellow
    }
    .columns.descr {
      text-align: center;
      color: gainsboro;
      font-weight: bold
    }
    .row.test{
        border-width: thick;
        border-color: aqua

    }
    </style>

<container class="body-notify">
                <row>
                    <columns small="12" large="12" >
                        <spacer size="10"></spacer>
                        <h4 class="topline">Information</h4>
                    </columns>
                </row>
                <row>
                    <div class="test">
                    <columns class="descr" small="12" large="6">Description 1</columns>
                    </div>
                    <columns small="12" large="6"><p class="value">Value 1</p></columns>
                </row>
                <row>
                    <columns small="12" large="6">Description 1</columns>
                    <columns small="12" large="6"><p class="value">Value 2</p></columns>
                  </row>
        </container>

【问题讨论】：

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

我去年从事电子邮件营销工作，我知道一些事情，你不能在电子邮件样式中添加任何样式的 css。所以我认为你可以像这样在你的 div 上添加背景颜色：

&lt;div class="row" style="backgound:red;"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这有点晚了，但希望它仍然会有所帮助！ columns 元素是 Inky 模板标记的一部分，如果您在浏览器中检查它，您会发现这实际上是一个带有类名 columns 的 <th> 元素。所以你应该可以用 th.columns 来定位它：

th.columns.descr { 文本对齐：居中；颜色：盖茨伯勒；字体粗细：粗体 }

同样，html 标记中的<row> 是一个表格元素，所以试试table.row { add css here }

还要小心在 html 电子邮件中使用 <div> 标记 - 它们会被一些电子邮件客户端剥离。来自基金会docs

在制作电子邮件时，div 不是一回事。不要杀死信使，但这是真的。发现我们不能只使用具有自动左右边距的 a 来居中或背景颜色，这并不有趣。它不适用于大多数电子邮件客户端。 <div> 仍可用于定位 CSS 和对语义相关的元素进行分组，但不应用于结构目的或间距。

您可以改用<wrapper> 元素（也是墨迹模板标记）。在实际的 html 中，这是一个带有 wrapper 类的 table 元素，所以如果你需要用 sass 来定位它，那就是

table.wrapper

【讨论】：