IronPdf 在从 HTML 创建 PDF 时会忽略 Bootstrap 列网格

Question

对于我的例子，我定义了一个简单的页面，其中包含一个巨型和 2 列，每个列都有不同的标题和背景颜色。在浏览器中查看 HTML 模板时，您会看到 2 列布局与 Jumbotron 如预期的那样。查看 IronPdf 创建的 pdf 时，列折叠成单个列布局，每个div 堆叠且全宽。

我遵循了IronPDF提供的示例 https://ironpdf.com/docs/questions/html-to-pdf-responsive-css/

演示该问题的项目可在此处找到： https://github.com/crumdev/IronPdfExample

我希望 PDF 的输出能够反映浏览器中显示的内容，因为我需要列格式才能工作，以便创建具有我需要的多列布局的 PDF 布局。

Answer 1

我收到了IronPdf的回复：

我让我的工程师研究了一下，目前引导程序与 IronPDF 不完全兼容。我们已经计划在今年晚些时候的下一个版本中进行这项工作。我已经记录了它，并在我们能够解决此问题时让您了解最新情况。感谢您的耐心等待。

Answer 2

我遇到同样的情况，但使用 bootstrap 版本 4.0.0 并遵循以下代码对我有用：

注意：如果您看不到某些列，请尝试在每行中组织您的 coldiv

HtmlToPdf Renderer = new HtmlToPdf();
Renderer.PrintOptions.SetCustomPaperSizeInInches(8.5, 11);
Renderer.PrintOptions.PaperOrientation = PdfPrintOptions.PdfPaperOrientation.Portrait;
Renderer.PrintOptions.Title = "My PDF Document Name";
Renderer.PrintOptions.RenderDelay = 50; //ms
Renderer.PrintOptions.CssMediaType = PdfPrintOptions.PdfCssMediaType.Screen;
Renderer.PrintOptions.DPI = 300;
Renderer.PrintOptions.FitToPaperWidth = true;
Renderer.PrintOptions.JpegQuality = 80;
Renderer.PrintOptions.GrayScale = false;
Renderer.PrintOptions.FitToPaperWidth = true;
Renderer.PrintOptions.InputEncoding = Encoding.UTF8;
Renderer.PrintOptions.Zoom = 100;
Renderer.PrintOptions.ViewPortWidth = 1280;
Renderer.PrintOptions.CreatePdfFormsFromHtml = true;
Renderer.PrintOptions.CustomCssUrl = new Uri("https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css");
Renderer.PrintOptions.MarginTop = 10;  //millimeters
Renderer.PrintOptions.MarginLeft = 10;  //millimeters
Renderer.PrintOptions.MarginRight = 10;  //millimeters
Renderer.PrintOptions.MarginBottom = 10;  //millimeters
Renderer.PrintOptions.FirstPageNumber = 1;
Renderer.RenderHtmlAsPdf(html).SaveAs(fileName);