twitter-bootstrap Wicked PDF 忽略引导网格系统
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27629710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wicked PDF ignores bootstrap grid system
提问by Kacper Trafia?
in my template x.pdf.erb site i have linked all the stylesheets and javascript tags:
在我的模板 x.pdf.erb 站点中，我链接了所有样式表和 javascript 标签：
<%= 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" %>
When the pdf site is generated, everything is good except bootstrap grid system, i mean wicked pdf ignores my:
当生成 pdf 站点时，除了引导网格系统外，一切都很好，我的意思是邪恶的 pdf 忽略了我的：
<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>
So, it`s displayed like normal divs without bootstrap grid. Can you help me with this?
所以，它像没有引导网格的普通 div 一样显示。你能帮我解决这个问题吗？
回答by glyuck
I've came across the same problem. There are several solutions:
我遇到了同样的问题。有几种解决方案：
- Upgradeyour
wkhtmltopdfbinary to version >= 0.12, then add:viewport_sizeoption to render, something like this:
- 将您的
wkhtmltopdf二进制文件升级到版本 >= 0.12，然后添加:viewport_size渲染选项，如下所示：
respond_to do |format|
format.html
format.pdf do
render pdf: "my_pdf",
viewport_size: '1280x1024'
end
end
- Or you can just use
col-xs-*classes - Or create
pdf.css.scss(I'm using bootstrap-sass) with following content:
- 或者你可以只使用
col-xs-*类 - 或者
pdf.css.scss使用以下内容创建（我正在使用 bootstrap-sass）：
@import "bootstrap/variables";
@import "bootstrap/mixins";
@include make-grid(sm);
@include make-grid(md);
@include make-grid(lg);
Don't forget to include it with <%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>
不要忘记包含它 <%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>
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 @mediawrappers, it's important.
对于纯CSS，你将不得不复制粘贴所有.col-sm-*，.col-md-*，.col-lg-*从bootstrap.css规则到您的pdf.css，但没有@media包装，这一点很重要。
回答by crx4
For anyone who using KnpLabs/snappy, giving the viewport as an option fixes the situation:
对于使用KnpLabs/snappy 的任何人，将视口作为选项可解决以下情况：
$snappy->setOption('viewport-size','1280x1024');
回答by Excalibaard
The above solutions don't work with Bootstrap 4 as of now. Bootstrap 4's grid system is built on the use of flexbox, which is not supported by wicked_pdf, due to its dependency on wkhtmltopdf.
截至目前，上述解决方案不适用于 Bootstrap 4。Bootstrap 4 的网格系统建立在使用 flexbox 的基础上，wicked_pdf 不支持它，因为它依赖于 wkhtmltopdf。
In order to get a simple grid working while using Bootstrap 4, it's best to define your own grid by using the width w-*and display d-*commands, in order to overrule the display: flexsetting.
为了在使用 Bootstrap 4 时获得一个简单的网格，最好使用 widthw-*和 displayd-*命令定义您自己的网格，以否决display: flex设置。
Example:
例子：
<div class="container">
<div class="row d-table-row">
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
</div>
</div>
Note: only widths of 25, 50, 75 and 100% are supported by default. You can increase flexibility by adding your own additional width definitions to the $sizesvariable of bootstrap, by adding something like this to your scss stylesheet:
注意：默认仅支持 25、50、75 和 100% 的宽度。您可以通过将您自己的附加宽度定义添加到$sizes引导程序的变量来提高灵活性，方法是在您的 scss 样式表中添加如下内容：
// _custom.scss
@import "bootstrap/functions";
@import "bootstrap/variables";
$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);
@import "bootstrap";
// Your CSS
Using width and display classes:
使用宽度和显示类：
https://getbootstrap.com/docs/4.0/utilities/display/
https://getbootstrap.com/docs/4.0/utilities/display/
https://getbootstrap.com/docs/4.0/utilities/sizing/
https://getbootstrap.com/docs/4.0/utilities/sizing/
Bootstrap 4 flexbox grid and wkhtmltopdf:
Bootstrap 4 flexbox 网格和 wkhtmltopdf：
