邪恶的PDF忽略引导网格系统 [英] Wicked PDF ignores bootstrap grid system

问题描述

在我的模板x.pdf.erb网站中，我已链接了所有样式表和JavaScript标记：

in my template x.pdf.erb site i have linked all the stylesheets and javascript tags:

           <%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "style.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
            <%= wicked_pdf_javascript_include_tag "application" %>

当生成pdf网站时，除bootstrap网格系统外，一切都很好，我的意思是， ：

When the pdf site is generated, everything is good except bootstrap grid system, i mean wicked pdf ignores my:

<div class="container">
   <div class="row">
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
   </div>
</div>

所以，它显示为没有引导网格的普通div。你可以帮我吗？

So, it`s displayed like normal divs without bootstrap grid. Can you help me with this?

推荐答案

我遇到了同样的问题。有几种解决方案：

I've came across the same problem. There are several solutions:

1. 升级您的 wkhtmltopdf 二进制版本> = 0.12，然后添加：viewport_size 选项渲染，如下所示：
   

1. Upgrade your wkhtmltopdf binary to version >= 0.12, then add :viewport_size option to render, something like this:

respond_to do |format|
  format.html
  format.pdf do
    render pdf: "my_pdf",
           viewport_size: '1280x1024'
  end
end

1. 或者您可以使用 col-xs - * classes


2. 或者创建 pdf.css.scss （我正在使用bootstrap-sass）包含以下内容：

1. Or you can just use col-xs-* classes
2. Or create pdf.css.scss (I'm using bootstrap-sass) with following content:

@import "bootstrap/variables";
@import "bootstrap/mixins";

@include make-grid(sm);
@include make-grid(md);
@include make-grid(lg);

不要忘记将它加入<％= wicked_pdf_stylesheet_link_tagpdf .css - ％>

对于普通的css，你必须复制粘贴所有的 .col-sm - * ， .col-md - * ， .col-lg - * rules从bootstrap.css到你的pdf.css，但没有 @media 包装，这很重要。

For plain css you will have to copy-paste all .col-sm-*, .col-md-*, .col-lg-* rules from bootstrap.css into your pdf.css, BUT without @media wrappers, it's important.

这篇关于邪恶的PDF忽略引导网格系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！