Rotativa 和 Bootstrap 网格样式

Question

我正在处理 ASP.NET MVC 5 项目并使用 Rotativa 从 Razor 视图生成 PDF 文档。

我似乎无法让 Rotativa 使用 Bootstrap 样式正确渲染视图。我正在尝试使用 Bootstrap 做得很好的简单网格布局来设置视图样式。没什么特别的。

这是我的 Razor 视图的屏幕截图：

这是 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>

还有其他人能够让这个工作吗？

Answer 1

您应该设置正确的页面大小并在缩小浏览器时注意分辨率和 Bootstrap 断点 window。

从屏幕截图中我可以看到当您转换为 PDF 时获得移动输出；这意味着 Bootstrap 已检测到小页面大小并相应地调整样式。我认为默认的 Rotativa 页面大小是 A4。

Answer 2

我遇到了同样的问题。尝试使用 col-xs-# 而不是 col-md-# / col-sm-#，这非常适合我。

Answer 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 class 来显示行内块。所以在你的情况下：

.printDetails > div {
   display: inline-block;
}

另请注意，行数为 5 和 6 或 5 和 5，具体取决于页面大小，一些宽度用于 pdf 大小边距，这很奇怪，为什么它没有获得与移动版本相同的确切大小服用 Rotativa

希望对大家有所帮助。

更新

正如@Erdogan 回复的那样，在检查了他的 link 之后，我测试了他可能认为我必须检查的代码。我在这里引用代码：

just added a CSS class at the same level as uk-grid called "flexrow" and another one for my divs.

.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

Answer 4

对于bootstrap 3，请执行以下操作：

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
     another tags ...
</div>

对于bootstrap 4，执行以下操作：

    <div class="col-6 col-sm-6 col-md-6 col-lg-6">
         another tags ...
    </div>

Answer 5

对于 bootstrap4 添加以下样式

.flexrow {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex !important;
    }
.flexrow > div {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

然后在 HTML

中的每一行 class 旁边添加 flexrow

<div class="row flexrow"> </div>

感谢link

Rotativa 和 Bootstrap 网格样式

Rotativa and Bootstrap Grid Styling

asp.net-mvc

twitter-bootstrap

pdf-generation

rotativa