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

发布时间：2020-12-15 22:33:06 所属栏目：asp.Net 来源：网络整理

导读：我正在开发一个ASP.NET MVC 5项目,并使用Rotativa从Razor视图生成PDF文档. 我似乎无法让Rotativa使用Bootstrap样式正确渲染视图.我正在尝试使用Bootstrap做得很好的简单网格布局来设置视图的样式.没什么太花哨的. 这是我的Razor View的截图：以下是PDF的屏

我正在开发一个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-#,这对我来说非常有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!