web-dev-qa-db-fra.com

Bootstrap 3 - Imprimer la mise en page et les sauts après chaque colonne de la grille

Si vous prenez cet exemple (voyez-le ici: http://www.bootply.com/93816 )

<div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

Lorsque vous effectuez un aperçu avant impression de la page générée, il semble que les colonnes s’empilent/se séparent (comme si le flottant était supprimé) au lieu de les afficher dans la présentation de grille habituelle.

J'ai jeté un coup d'œil au @media print sections de bootstrap.css et je ne vois rien qui puisse causer cela div.

Est-ce que quelqu'un sait comment éviter cela?

htmlcsstwitter-bootstrapprinting
73
AndyC

Le commentaire de Bojangles m'a amené dans la bonne direction, je vais donc répondre à ma propre question.

Utilisation des colonnes de grille de taille 'xs' qui, selon http://getbootstrap.com/css/#grid-options , sont destinées à "Téléphones de très petits appareils (<768px)", Bootstrap imprime heureusement comme prévu.

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>
119
AndyC

La solution doit être sur les éléments et non sur la page elle-même. Vous ne devriez pas non plus vous fier à col-xs -..., car ils sont destinés aux petits écrans/périphériques.

Le problème est que la page elle-même est petite en termes de pixels, donc bootstrap pense qu'il faut appliquer les styles xs.

Le problème ne sera pas traité par l'équipe Bootstrap et est lié à https://code.google.com/p/chromium/issues/detail?id=273306

La solution Bootstrap consistait à documenter de manière obscure ce comportement "décalé" https://github.com/twbs/bootstrap/issues/12078 .

À mon avis, il devrait y avoir un ensemble col-print -... de classes de mise en page afin que très petit et impression puissent coexister.

Ma solution provisoire est la suivante:

@media print {
  [class*="col-sm-"] {
    float: left;
  }
}

Vous pouvez utiliser col-print, dans notre cas, nous utilisons sm, pas xs car nous voulons que xs bloque la mise en page, c'est pourquoi l'utilisation de ces classes pour print ne fonctionnera pas.

33
Gerard

Sur la base de la solution Gerard, vous pouvez utiliser le bootstrap mixin .make-grid () comme ceci, de sorte que l’impression ne tombe jamais à la taille xs

@media print {
  .make-grid(sm);
}

ou le css généré (si vous n'aimez pas utiliser moins):

@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.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-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%;
  }
}
18
Paolo Sanchi

J'ai créé un print.css séparé et ajouté ce qui suit:

@page {
    size: A3;
    margin-left: -5cm;
    margin-right: -5cm;
    }

Fonctionne bien avec Chrome, mais les marges négatives tuent IE. Firefox ne semble pas en avoir besoin. Je serais intéressé par une autre approche.

7
user3108913