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

所以我所做的是在包含基础/ _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

我在基金会5的variables.scss文件中做了这个，虽然它并不完美。

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