Rotativa 和 Bootstrap 网格样式
Posted
技术标签:
【中文标题】Rotativa 和 Bootstrap 网格样式【英文标题】：Rotativa and Bootstrap Grid Styling 【发布时间】：2015-05-14 09:17:49 【问题描述】：我正在处理一个 ASP.NET MVC 5 项目并使用 Rotativa 从 Razor 视图生成 PDF 文档。
我似乎无法让 Rotativa 使用 Bootstrap 样式正确渲染视图。我正在尝试使用 Bootstrap 做得很好的简单网格布局来设置视图的样式。没什么太花哨的。
这是我的 Razor View 的屏幕截图：
这是 PDF 的屏幕截图：
这是我的观点的内容：
@
Layout = null;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
还有其他人能够让这个工作吗？
【问题讨论】：
【参考方案1】：我也有同样的问题。 尝试使用 col-xs-# 代替 col-md-# / col-sm-#，这对我来说非常有效。
【讨论】：
哦，快，这成功了！非常感谢您发布此答案 感谢您的回答。它就像一个魅力。如果可能的话，你能告诉我为什么 col-sx-# 有效吗？ @Thomas.Benz 没问题。乐意效劳。我相信rotativa lib的源代码中的答案，说实话没有检查。 哇，有帮助。谢谢 @Aleksei 我正在使用最新的引导程序，col-xs-# 不再存在，有什么建议吗？【参考方案2】：
在缩小浏览器窗口时，您应该设置正确的页面大小并注意分辨率和引导断点。
从屏幕截图中我可以看到转换为 PDF 时您会获得移动输出；这意味着 Bootstrap 检测到小页面大小并相应地调整样式。我认为默认的 Rotativa 页面大小是 A4。
【讨论】：
【参考方案3】：我在这里找到了解决方法。 html后
<div class="row printDetails">
<div class="col-5" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
你应该创建一个 CSS 类来显示内联块。所以在你的情况下：
.printDetails > div
display: inline-block;
另请注意，根据页面大小，行数是 5 和 6 或 5 和 5，有些宽度用于 pdf 大小的边距，这很奇怪，为什么它没有得到与使用 Rotativa 的移动版本的确切大小.
希望对某人有所帮助。
更新
正如@Erdogan 回答的那样，在检查了他的链接后，我测试了他可能认为我必须检查的代码。我在这里引用了代码：
刚刚添加了一个与 uk-grid 处于同一级别的 CSS 类，称为“flexrow”，另一个用于我的 div。
.flexrow
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
.flexrow > div
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
知道了：Here in some of the comments
【讨论】：
感谢 Edi，它有效但不是一个好的解决方案，请查看 Luis Hongo 的回答。这是一个很好的解决方案。 ***.com/q/57862337/1327316【参考方案4】：对于引导程序 3，请执行以下操作：
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
对于引导程序 4，请执行以下操作：
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
【讨论】：
【参考方案5】：为 bootstrap4 添加以下样式
.flexrow
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
.flexrow > div
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
然后在 HTML 中的每个行类旁边添加 flexrow
<div class="row flexrow"> </div>
感谢link
【讨论】：
以上是关于Rotativa 和 Bootstrap 网格样式的主要内容，如果未能解决你的问题，请参考以下文章