gpt4 book ai didi

asp.net-mvc - Rotativa 和 Bootstrap 网格样式

转载 作者:行者123 更新时间:2023-12-01 18:12:51 27 4
gpt4 key购买 nike

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

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

这是我的 Razor View 的屏幕截图: Razor View

以下是 PDF 的屏幕截图: Generated PDF

这是我的 View 内容:

@{
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>

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

最佳答案

我也遇到了同样的问题。尝试使用 col-xs-# 代替 col-md-#/col-sm-#,这非常适合我。

关于asp.net-mvc - Rotativa 和 Bootstrap 网格样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29006012/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com