Question

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

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

以下是我的Razor View的屏幕截图：

以下是PDF的屏幕截图： Generated 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

我有同样的问题。尝试使用 col-xs - ＃而不是col-md-＃/ col-sm-＃，这对我来说非常有用。

Answer 2

缩小浏览器窗口时，应设置正确的页面大小并处理分辨率和Bootstrap断点。

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

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类来显示内联代码块。因此，在您的情况下：

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

还要注意，行的数量是5和6或5和5，这取决于页面大小，其中一些宽度用于pdf尺寸边距，这很奇怪，为什么它没有获得与使用Rotativa的移动版本相同的确切尺寸

希望它对某人有帮助。

更新

@Erdogan回答，并且在检查了他的链接之后，我测试了他可能认为我必须检查的代码。.我在这里引用代码：

只是在与uk-grid相同级别上添加了一个称为“ flexrow”的CSS类，为我的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

Answer 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>

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 中的每个行类旁边添加 flexrow

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

感谢link

Rotativa和Bootstrap网格样式

5 个答案: