Bootstrap 3 - Imprimer / PDF

J'ai besoin d'imprimer mon CV mais le vieux truc

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

ne fonctionne plus depuis Bootstrap 3 est mobile-première (début de petit appareil, puis ajouter les media queries pour l'écran plus grand) donc quand j'ai l'impression que mon navigateur est de garder le mobile css.

Correct:

http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png

Mal:

http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

Comment puis-je résoudre ce problème?
Je ne peux pas ré-inventer bootstrap 3, bien sûr, et je ne peux pas utiliser bootstrap 2 depuis syntaxe est changé.

J'ai fait un joli modèle de Curriculum Vitae et j'aimerais le garder aussi sur pdf/format d'impression.

Grâce

OriginalL'auteur mtt | 2013-08-28

  1. 9

    Je suis la plupart des cas, je vais attendre l'impression dans la non version horizontale peut-être? Dans votre cas vous pouvez essayer d'appliquer la grille des règles sur le support d'impression requête.

    Dans le cas où vous utilisez la petite grille (col-sm-*) par défaut, b.e.

        <div class="container">

   <div class="row">
       <div class="col-sm-6">Left</div>
       <div class="col-sm-6">Right</div>
   </div>   
    </div> <!-- /container -->

    Dans votre grille.moins de remplacer @media (min-width: @screen-tablet) { avec @media (min-width: @screen-tablet), print { (ajouter d'impression, voir: CSS media queries: max-width et max-height)
    Recompiler bootstrap et votre pdf aura gauche /droite tout comme l'écran maintenant.

    Sans Moins vous pourriez essayer d'ajouter des règles css pour votre cas comme:

    @media print 
{
    body {width:1200px;}
    div[class|=col-]{float:left;}
    .col-sm-6{width:50%}
}

    Note d'impression.moins contient des règles spécifiques pour les médias imprimés. Ce est utilisé pour masquer la barre de navigation par exemple. Aussi les utilitaires classes: http://getbootstrap.com/css/#responsive-utilities Impression classes.

    Si votre navigateur accepte le @viewport (voir: http://docs.webplatform.org/wiki/css/atrules/@viewport), il sera peut-être possible de faire:
    @media print {@viewport {width:1200px;} } avant le bootstrap CSS charges

    J'étais en train de regarder le problème dans le mauvais sens (html to pdf converter, de la force de google chrome pour utiliser une requête de média...) La solution était si simple et sous mes yeux mais je ne pourrais pas le voir. Merci beaucoup!

    OriginalL'auteur Bass Jobsen

  2. 5

    L'ajout d'un support d'impression requête a fonctionné pour moi. C'est ce que je me suis finalement tombé sur.

    @media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

    OriginalL'auteur kalefranz

  3. 1

    Dans mon projet, j'ai publié le même problème. Depuis que j'ai un app.less fichier dans lequel j'ai importer le bootstrap.less source, je n'ai suivantes:

    @import "my_path/bootstrap.less";
@media print{
   .make-grid(sm);
}

    Qui est en fait ce qu'il a fait dans le Bootstrap est grid.less fichier

    C'est peut-être pas la meilleure solution, mais c'est 3-code-lignes 😉

    OriginalL'auteur balanza