用于打印的自举网格

我想设计一个报表页面，其中打印到移动设备的布局不同。我正在使用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

用于打印的自举网格

回答

相关问题