用於打印的自舉網格

我想設計一個報表頁面，其中打印到移動設備的佈局不同。我正在使用bootstrap v3。看起來網格不能區分兩者，因爲打印的斷點與移動的斷點相同（xs）用於打印的自舉網格

例如：在下面的測試html中，我的打印頁面（或打印預覽）顯示了xs6列並排但sm6列堆疊。 xs和sm之間沒有斷點。

當然，我的打印頁面比我的移動視口寬，所以不應該使用sm佈局？

我做錯了什麼或者是這樣嗎？是否有打印的定義視口寬度？

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6"> 
      xs6 
      </div> 
      <div class="col-xs-6"> 
      xs6 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
      sm6 
      </div> 
      <div class="col-sm-6"> 
      sm6 
      </div> 
     </div>  
    </div> 
</body> 
</html>

來源

2014-03-05 Gordon Copestake

這個問題http://stackoverflow.com/questions/320357/safe-width-in-pixel-for-printing-web-pages指向事實的打印視口（A4的）是670px這是我的問題是。我的打印頁面和我的移動風格之間存在衝突，因爲它們都具有相似的視口大小。 –

我所做的是手動重新創建這些列類在我的打印CSS 。

.col-print-1 {width:8%; float:left;} 
.col-print-2 {width:16%; float:left;} 
.col-print-3 {width:25%; float:left;} 
.col-print-4 {width:33%; float:left;} 
.col-print-5 {width:42%; float:left;} 
.col-print-6 {width:50%; float:left;} 
.col-print-7 {width:58%; float:left;} 
.col-print-8 {width:66%; float:left;} 
.col-print-9 {width:75%; float:left;} 
.col-print-10{width:83%; float:left;} 
.col-print-11{width:92%; float:left;} 
.col-print-12{width:100%; float:left;}

然後，我只是使用這些類，就像我使用引導類來使我的列只打印。我還創建了.visible-print和.hidden-print以僅在打印版本中隱藏/顯示元素。

它仍然需要一些工作，但這個快速補丁幫了我很多。

來源

2015-01-26 14:42:03 Fredy31

切換風格像這樣

<div class="row"> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

見

或#grid-example-mixed-complete

，可能你需要clearfix

<!-- Add the extra clearfix for only the required viewport --> 
<div class="clearfix visible-xs"></div>

#grid-responsive-resets

來源

2014-03-05 13:42:19 Dwza

是的，但是我的打印版本總是使用xs風格，它使我的手機風格變得更加複雜 –

但在您的文章中，您有兩行使用不同的網格，但是如果您想讓它響應，您必須將所需的所有類型:) – Dwza

也許我給了一個壞榜樣。我試圖確保我的打印頁面使用不同的風格來移動版本。兩者似乎都想使用col-xs-＃版本 –

也許你可以使用引導程序2.如果您熟悉引導2，那麼你可以使用它作爲替代，因爲這提供無響應CSS。 Bootstrap 2首先不是移動的，你必須添加一個額外的樣式表來使你的網頁響應。

或者您可以爲移動部件添加clearfixes。見http://getbootstrap.com/css/#grid-responsive-resets

來源

2014-09-19 02:50:34 Edgar

儘管BS2可能是一種解決方案，但我寧願期待比後退 –

我有一個類似的問題，對我來說，最簡單的解決方案是手動修改元素的寬度，我希望在打印時出現不同的寬度（並且我添加了特定的類 - 在我的情況下：title-container，這些容器，沿着col-xs-6等）。

例如：

<div class="jumbotron"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container"> 
      Some stuff 
      </div> 

      <div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container"> 
      Some more stuff 
      </div> 
     </div> 
    </div> 
</div> 

@media print { 
    .title-container { 
     width: 360px; 
     float: left; 
    } 

    .details-container { 
     width: 300px; 
     float: right; 
    } 
}

在我來說，我需要一列以您可以在您的自定義設置的CSS寬度也合適，一個向左，因此花車... 浮動爲.col-xs-6等只是一個快速和骯髒的解決方案，但做了一個頁面，我需要這個工作...

來源

2014-10-06 11:59:02 firepol

我見過的最佳解決方案，雖然還不夠理想！ –

是的，我只是做了類似的事情。我知道這是黑客，但我有一個col-xs-2/col-xs-10的事情。我在@media print {.hide_element_for_print {display：none}中創建了一個類，並在需要時使用（如col-xs-2）並更改.col-xs-10 {width：100％}的定義。這允許我隱藏左側導航欄並打印主要內容區域的整頁寬度。 –

的薩斯版本的Fredy31解決方案：

@for $i from 1 through 12 { 
    .col-print-#{$i} { 
     width: #{percentage(round($i*8.33)/100)}; 
     float: left; 
    } 
}

來源

2015-09-14 12:30:21 MiCc83

正是我在找的東西！ – MFrazier

下的偉大工程，以創建特定的打印介質格元素。使用引導3.

@media print { 
    .make-grid(print); 
}

然後，您可以使用關鍵字print的所有網格col元素。例如：col-print-6col-print-offset-2等

來源

2016-01-16 21:32:29 kspearrin

如果您希望引導程序的網格不使用col-xs（移動設置）進行打印，並且希望使用col-sm- ??相反，基於Fredy31答案，你甚至不需要定義col-print - ??。簡單地重寫所有col-md- ??裏面一個CSS類定義：@media打印{/ *複製和粘貼bootstrap.css * /}這樣的：

@media print { 
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
     float: left; 
    } 
    .col-sm-12 { 
     width: 100%; 
    } 
    .col-sm-11 { 
     width: 91.66666667%; 
    } 
    .col-sm-10 { 
     width: 83.33333333%; 
    } 
    .col-sm-9 { 
     width: 75%; 
    } 
    .col-sm-8 { 
     width: 66.66666667%; 
    } 
    .col-sm-7 { 
     width: 58.33333333%; 
    } 
    .col-sm-6 { 
     width: 50%; 
    } 
    .col-sm-5 { 
     width: 41.66666667%; 
    } 
    .col-sm-4 { 
     width: 33.33333333%; 
    } 
    .col-sm-3 { 
     width: 25%; 
    } 
    .col-sm-2 { 
     width: 16.66666667%; 
    } 
    .col-sm-1 { 
     width: 8.33333333%; 
    } 
}

來源

2016-04-02 06:51:38

並採用MiCc83的答案伊赫桑Abidi的答案的SASS版本：

@for $i from 1 through 12 { 
     .col-sm-#{$i} { 
      width: #{percentage(round($i*8.33)/100)}; 
      float: left; 
     } 
    }

我更喜歡這樣做，因爲我總是指定「sm」大小，並且最接近我應用程序中的打印頁面。然後，我只需要在出現異常情況時添加專門用於打印的內容。

來源

2017-08-07 19:22:03

用於打印的自舉網格

回答

相關問題