{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 beautiful° 的问题《Dompdf prints html bootstrap code as col-sm-x and》','https://www.manongdao.com/q-908385.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am using Dompdf in PHP in order to print reports in PDF format. I can't figure out how to print an HTML bootstrap code the way I see it on my screen. For example, you know that bootstrap grid collapses if the device is smaller. In this case, in my PDF, the grid appears as though it were inside a mobile or table, like col-xs-x or col-sm-x instead of col-lg-x. Is there a way to specify in Dompdf that the view should look like in col-lg-x?
This is the sample html bootstrap code:
$content2='<!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.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>';
Here is the rest of the code:
$pdf = new Dompdf();
$pdf->loadHtml($content2);
$pdf->render();
$pdf->stream();
For example, in my screen, columns
<h3>Column 1</h3>, <h3>Column 2</h3>, and <h3>Column 3</h3> appear in the same line.
But inside the pdf, they appear each in different lines (collapsed to col-xs-x). There is one in a row. And not three in one row -> as the way I want it (example here).
a few notes: col-sm-4 col-md-4 col-lg-4
can be simplified to col-sm-4
The main problem that you are having is the PDF converter is basically converting for a print screen. The max width for printing is much smaller than a browser.
You could try col-xs-4 instead