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;
  }
}

Answer 2

问题在于网格中的“ .large-XXX .columns ”仅为“ @media screen ”定义：

基础/_variables.scss:98

$small: "only screen and (min-width: #{$small-screen})";

基础/组件/_grid.scss:153

  @media #{$small} {

    @for $i from 1 through $total-columns {
      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }
    ...
  }

所以我所做的就是在包含foundation/_variables.scss 之后添加一行来覆盖它：

// This includes all of the foundation global elements that are needed to work with any of the other files.
@import "foundation/variables";

$small: "screen and (min-width: #{$small-screen}), print";

当然，这仅适用于您不通过@import "foundation"自动包含所有基础，而是手动包含所有基础（即，取消注释 _foundation.scss 中的相应行）。

Answer 3

我在variables.scssFoundation 5 的文件中这样做了，尽管它并不完美。

// $screen: "only screen";
 $screen: "print, screen";