13

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

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

这是我的 Razor View 的屏幕截图： 剃刀视图

这是PDF的屏幕截图： 生成的 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>

有没有其他人能够得到这个工作？

4

5 回答 5

35

我有同样的问题。尝试使用col -xs-# 代替 col-md-# / col-sm-#，这对我来说非常有效。

于 2015-03-17T23:33:53.707 回答
3

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

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

于 2015-03-16T16:02:34.757 回答
1

我在这里找到了解决方法。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;         
}

得到这个：在一些评论中

于 2020-04-21T11:21:22.603 回答
0

对于引导程序 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>
于 2020-07-20T22:15:10.903 回答
0

对于 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>

感谢链接

于 2021-01-27T13:47:23.957 回答