我正在研究ASP.NET MVC 5项目,并使用Rotativa从Razor视图生成PDF文档。

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

这是我的剃刀视图的屏幕截图:


这是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-#,这对我来说非常理想。

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

10-11 08:20