J'utilise Symfony2 Bundle KnpSnappyBundle pour convertir un modèle html twig template en pdf).
KnpSnappyBundle est basé sur Snappy wrapper, qui utilise wkhtmltopdf .
Mon modèle utilise Twitter bootstrap 2.3.2 css comme ceci:
<div class="container">
<div class="row">
<div class="span12">
<h4>TITLE</h4>
</div>
</div>
<div class="row">
<div class="span6" id="customers">
<h5>TITLE</h5>
<p>TEXT</p>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
<div class="span6" id="estimate">
<h5>TITLE</h5>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
</div>
</div>
Problème: les clients et les durées estimées ne sont pas sur la même ligne qu'ils devraient l'être. Je ne sais pas ce qui se passe.
Voici la solution pour Bootstrap3: utilisez toujours .col-xs-n.
La raison en est que wkhtmltopdf ne supportait pas CSS dans le bloc @media. Dans bootstrap3, seule la règle col-xs-n en dehors du bloc @media.
J'ai vérifié le bootstrap2.3.2 css, il semble que les règles spanN soient toujours dans le bloc @media.
Ainsi, une solution laide serait copiée sur toutes les règles spanN dans le niveau supérieur vers un autre fichier CSS et incluse dans HTML.
Je sais que cette question est ancienne mais ce problème toujours se produit. Dans un récent projet Laravel 5.8 et Twitter Bootstrap 4.0.. J'ai réussi à utiliser .col-md .col
et obtenir des résultats parfaits en procédant comme suit:
En ajoutant --viewport-size 1024x768
argument sur config/snappy.php
'pdf' => array(
'enabled' => true,
'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
'timeout' => false,
'options' => array(),
'env' => array(),
)
Ensuite, sur votre vue, utilisez .col-md
ou .col
sans aucun problème.
Remarque, incluez Bootstrap 4
à votre code HTML en utilisant chemin public.
//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">