Grid Rotativa生成的PDF不符合UIkit网格
我想根据我的实际CSS从指定视图生成PDFGrid Rotativa生成的PDF不符合UIkit网格,grid,styling,rotativa,getuikit,Grid,Styling,Rotativa,Getuikit,我想根据我的实际CSS从指定视图生成PDF <html> <head> <meta charset="utf-8" /> <style> .justify { text-align: justify; text-rendering: geometricPrecision; } .center { text-ali
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
.证明{
文本对齐：对齐；
文本呈现：几何精度；
}
.中心{
文本对齐：居中；
}
身体{
字体大小：15px；
空白：正常；
线高：110%；
文本呈现：几何精度；
}
.右标题{
字体大小：12px；
}
.更大{
字号：18px；
}
部分：
办公室：
案例：
外贸局
SATES-DCE-UV-2887/2019
请求验证请求。
我已经有了带有CSS的my HTML，它按预期显示，左边是徽标，右边是两个minnor div分隔的文本，但是当生成PDF时，它会将我的div分隔成不同的行。由于PDF页面的宽度，布局是否会“响应”？使用uk width的方式是正确的，因此，对于PDF页面来说，内容可能太大了。我会尝试为它设置较小的字体，并检查是否有可能使用@print，因为这些是通常用于打印的特定样式（不知道Rotativa，但其他一些框架使用打印功能）@moped在阅读有关问题的内容后，似乎问题在于display:flex没有在网格上工作，刚刚添加了一个与英国网格级别相同的CSS类，名为“flexrow”，另一个用于我的div
.flexrow{display:-webkit-box；display:-webkit-flex；display:flex！重要；}.flexrow>div{-webkit-box-flex:1；-webkit-flex:1；}