Zurb Foundation 4如何在打印時保留列

我使用的是Zurb的Foundation 4.2.3，但是當我打印頁面時，網格佈局總是不能維護。Zurb Foundation 4如何在打印時保留列

例如，

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

這呈現爲 enter image description here

但在打印時它成爲此。

enter image description here

是否有修復此使電網的佈局得住？

來源

2013-07-08 CookieMonster

我說這個我.scss文件結尾：

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

來源

2013-07-09 22:19:16

謝謝，但這不起作用。右列被擠壓成一個非常小的列。我已經嘗試過這樣的事情，但是我找不到最好的解決方案。你從哪裏得到'width：8.333 ...％'？ – CookieMonster

噢，對我的例子，我使用了一個大1列的網格。我檢查了螢火蟲的元素，並在那裏得到了寬度。我想你的只是檢查你的列，並設置你的寬度。如果您正在使用scss，您可以在設置scss中找到一個選項「啓用打印樣式」並將其關閉。 –

問題IST說：「。大-XXX .columns」的網格只爲「@media屏幕定義「：

基礎/ _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中的相應行）。

來源

2014-03-28 08:43:46

我在Foundation 5的variables.scss文件中做了這個，儘管它並不完美。

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

來源

2016-09-22 06:33:57 Ryan

Zurb Foundation 4如何在打印時保留列

回答

相關問題