zurb-foundation - Zurb Foundation 4 打印时如何维护列

Question

我正在使用 Zurb 的 Foundation 4.2.3，但是当我打印页面时，网格布局始终没有得到维护。

例如，

<div class="row">
    <div class="small-3 columns">
        XXX
    </div>
    <div class="small-9 columns">
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
    </div>
</div>

这呈现为


但是打印出来就变成这个了。



是否有解决方法以保持网格布局？

Answer 1

我最后将它添加到我的 .scss 文件中:

@media print {
  div.columns {
    float:left!important;
    padding-left:0.9375em!important;
    padding-right:0.9375em!important;
    width:8.3333333333%!important;
  }
}