我正在开发一个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>
有没有其他人能够使这个工作?
解决方法
我有同样的问题. 尝试使用col-xs-#而不是col-md-#/ col-sm-#,这对我来说非常有用.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。