叠加在基础上的列

问题描述：

我正尝试使用基金会的电子邮件创建电子邮件模板。叠加在基础上的列

这是我的代码片段：

<container class="card-spacer"> 
    <row> 
     <columns small="12" large="6"> 
      <img src="https://b.zmtcdn.com/data/pictures/0/18419730/bb6821c381f4616717178beca3929af7.jpg" style="display: inline-block;" 
     </columns> 
     <columns small="12" large="6"> 
      <p class="zfb-zero-margin-paragraph zfb-primary-text-font text-right">Get more insights and analytics on your ads</p> 
      <p class="zfb-zero-margin-paragraph zfb-body-text-font text-right">View web dashboard for XYZ <a href="www.xyz.com" class="text-color-gold">www.xyz.com</a></p> 
     </columns> 
    </row> 
</container>

我想有图像和文本，这是在不同的列出现并排侧较大的设备（如桌面电子邮件客户端）并在移动客户端上彼此堆叠。

有关我如何实现相同的任何见解？

答

如果没有给出明确的大小，Flex网格中的列将不会换行 - 这是允许神奇的自动调整大小工作的原因。要在较小的屏幕上创建列堆栈，请手动添加class .small-12。

要从百分比或收缩行为切换回展开行为，请使用类.medium-expand或.large-expand。在下面的例子中，列在小屏幕上堆叠，并在大屏幕上变为均匀宽度。

<div class="row"> 
     <div class="small-12 large-expand columns">One</div> 
     <div class="small-12 large-expand columns">Two</div> 
    </div> 

    For more information check its document 
    http://foundation.zurb.com/sites/docs/flex-grid.html

叠加在基础上的列

相关推荐