web-dev-qa-db-fra.com

Impression d'une page avec bootstrap 3

J'ai parcouru pas mal de réponses ici sur stackoverflow qui couvrent en partie ce sur quoi je m'interroge, mais je n'ai rien trouvé qui ait fonctionné pour moi.

Je comprends que la page d’impression mesure environ 550 px pour le format A4 et que, par conséquent, Bootstrap utilisera les styles et la présentation habituellement utilisés pour les appareils mobiles.

Lorsque j'utilise Ctrl + P pour ma page Web, la page imprimable ressemble à la version mobile de ma page. Mais comment puis-je le faire ressembler à la version de bureau? (support> 1024 px) Y at-il un moyen de faire cela?

Je sais que je peux modifier le fichier css spécifiquement pour l'impression. Mais comment résoudre ce problème avec le système de grille bootstrap 3? La largeur de mes divs dépend de ce que j'ai ajouté pour col-xs, mais je veux que print utilise la présentation (width) pour col-md

Edit: Après avoir lutté pendant plusieurs heures avec cela, je me rends compte que cela pourrait être plus complexe que ce à quoi je m'attendais. Changer la largeur ne résout pas le problème pour moi. Beaucoup de mes divs a la syntaxe de 

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

ou

<div class="col-md-4 col-sm-6 col-xs-12"></div>

La page a l'air bien dans XS pour les petits appareils, mais l'impression dans XS donne l'impression que de nombreux éléments sont gigantesques. Donc la question reste. Existe-t-il un moyen de rendre la page d'impression identique à celle des dispositifs de taille moyenne ou grande? Ou dois-je faire le css d'impression sans utiliser le système de grille d'amorçage et ajouter des largeurs statiques en pt pour tous les éléments pour y parvenir?

Merci d'avance

printingtwitter-bootstrap-3dpi
34
user2890488

J'ai fini par résoudre le problème en utilisant un propre fichier print.css sans tout le matériel d'amorçage réactif inclus. N'a inclus que quelques-unes des choses de bootstrap nécessaires avec show and hide.

4
user2890488

Il serait utile de fournir un JSBin. Quoi qu'il en soit, comme j'avais cette mise en page dans JSBin avec col-sm- (astérisque), vous pouvez simplement changer tous les caractères -sm- en -xs- entre la requête du support d'impression. Tous les pourcentages sont les mêmes à chaque point d'arrêt. Par conséquent, si vous modifiez sm en xs, cela imprimera et ignorera les autres classes de colonnes. Ahh, je lis le post maintenant, vous aurez besoin de changer tout le col-sm en col-md en cela et ensuite utiliser! Important, ça devrait le faire. Les xs col sont en dehors des requêtes des médias, c'est pourquoi cela se produit.

http://jsbin.com/AzICaQes/5

@media print {

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
.col-sm-12 {
  width: 100%;
}
.col-sm-11 {
  width: 91.66666666666666%;
}
.col-sm-10 {
  width: 83.33333333333334%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666666666666%;
}
.col-sm-7 {
  width: 58.333333333333336%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666666666667%;
}
.col-sm-4 {
  width: 33.33333333333333%;
 }
 .col-sm-3 {
   width: 25%;
 }
 .col-sm-2 {
   width: 16.666666666666664%;
 }
 .col-sm-1 {
  width: 8.333333333333332%;
 }

  }
66
Christina

En fait, tout ce que vous devez ajouter (à user.css) est la suivante:

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
  }
}

Pendant que vous y êtes, envisagez d’utiliser tous ces paramètres pour bootstrap 3.

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    Word-spacing:1px;
    letter-spacing:0.2px;
    font: 14px "Times New Roman", Times, serif;
    background:white;
    color:black;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer{
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }
}
6
danielklejnstrup

Pour ceux qui utilisent bootstrap mixins pour créer des colonnes comme celle-ci (version sass): 

@include make-sm-column(3, 0);

il ne suffira pas d’écraser les styles pour les classes de colonnes comme le suggère Christina. La seule solution simple que j'ai trouvée consiste à modifier $ screen-sm dans _variables.scss en 595 pixels et à recompiler le fichier bootstrap.css

Alors, trouvez ce code dans _variables.scss:

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

et changez cela en ceci:

// decrease min-width to fix print layout issue
$screen-sm:                  595px !default; 
$screen-sm-min:              $screen-sm !default;

puis dans votre _print.scss 

@page {
  size: A4;
  margin: 0;
}
@media print {

  html, body {
    width: 768px;
  }
  body {
    margin: 0 auto;
  }

  // .. your custom styles for print layout

}
2
Konst_

J'ai eu le même problème. J'ai fini par remplacer tout col-md- * par col-xs- * et cela fonctionnait à merveille. Voici le code exemple

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-md-9 text-center main-title col-md-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

converti en 

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-xs-9 text-center main-title col-xs-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>
1
casper123

Ajouter ce style css dans votre fichier print.css 

    @page {
    size: A4;
    margin: 40px;
}


    @media print {
    html,
    body {
        width: 210mm;
        height: 297mm;
    }
    @-moz-document url-prefix() {}
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-smdm-12 {
        float: left;
    }
    .col-sm-12,
    .col-md-12 {
        width: 100%;
    }
    .col-sm-11,
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-sm-10,
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-sm-9,
    .col-md-9 {
        width: 75%;
    }
    .col-sm-8,
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-sm-7,
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-sm-6,
    .col-md-6 {
        width: 50%;
    }
    .col-sm-5,
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-sm-4,
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-sm-3,
    .col-md-3 {
        width: 25%;
    }
    .col-sm-2,
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-sm-1,
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-sm-pull-12 {
        right: 100%;
    }
    .col-sm-pull-11 {
        right: 91.66666667%;
    }
    .col-sm-pull-10 {
        right: 83.33333333%;
    }
    .col-sm-pull-9 {
        right: 75%;
    }
    .col-sm-pull-8 {
        right: 66.66666667%;
    }
    .col-sm-pull-7 {
        right: 58.33333333%;
    }
    .col-sm-pull-6 {
        right: 50%;
    }
    .col-sm-pull-5 {
        right: 41.66666667%;
    }
    .col-sm-pull-4 {
        right: 33.33333333%;
    }
    .col-sm-pull-3 {
        right: 25%;
    }
    .col-sm-pull-2 {
        right: 16.66666667%;
    }
    .col-sm-pull-1 {
        right: 8.33333333%;
    }
    .col-sm-pull-0 {
        right: auto;
    }
    .col-sm-Push-12 {
        left: 100%;
    }
    .col-sm-Push-11 {
        left: 91.66666667%;
    }
    .col-sm-Push-10 {
        left: 83.33333333%;
    }
    .col-sm-Push-9 {
        left: 75%;
    }
    .col-sm-Push-8 {
        left: 66.66666667%;
    }
    .col-sm-Push-7 {
        left: 58.33333333%;
    }
    .col-sm-Push-6 {
        left: 50%;
    }
    .col-sm-Push-5 {
        left: 41.66666667%;
    }
    .col-sm-Push-4 {
        left: 33.33333333%;
    }
    .col-sm-Push-3 {
        left: 25%;
    }
    .col-sm-Push-2 {
        left: 16.66666667%;
    }
    .col-sm-Push-1 {
        left: 8.33333333%;
    }
    .col-sm-Push-0 {
        left: auto;
    }
    .col-sm-offset-12 {
        margin-left: 100%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0 {
        margin-left: 0%;
    }
    .visible-xs {
        display: none !important;
    }
    .hidden-xs {
        display: block !important;
    }
    table.hidden-xs {
        display: table;
    }
    tr.hidden-xs {
        display: table-row !important;
    }
    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }
    .hidden-xs.hidden-print {
        display: none !important;
    }
    .hidden-sm {
        display: none !important;
    }
    .visible-sm {
        display: block !important;
    }
    table.visible-sm {
        display: table;
    }
    tr.visible-sm {
        display: table-row !important;
    }
    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}
0
Rahul Soni