Asp.net-Mvc
Rotativa 和 Bootstrap 網格樣式
我正在開發一個 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-#，這對我來說非常有效。
在縮小瀏覽器視窗時，您應該設置正確的頁面大小並註意解析度和引導斷點。
從螢幕截圖中我可以看到轉換為 PDF 時您會獲得移動輸出；這意味著 Bootstrap 檢測到小頁面大小並相應地調整樣式。我認為預設 Rotativa 頁面大小為 A4。