web-dev-qa-db-fra.com

Grille d'amorçage pour l'impression

J'aimerais concevoir une page de rapport avec une mise en page différente pour l'impression sur mobile. J'utilise bootstrap v3. Il semble que la grille ne puisse pas différencier les deux car le point d'arrêt pour l'impression est identique au point d'arrêt pour mobile (xs)

Par exemple: Dans le test html ci-dessous, ma page imprimée (ou mon aperçu avant impression) montre les colonnes xs6 côte à côte mais les colonnes sm6 empilées. Il n'y a pas de point d'arrêt entre xs et sm.

Sûrement ma page imprimée est plus large que ma fenêtre mobile, alors elle ne devrait pas utiliser la mise en page sm?

Est-ce que je fais quelque chose de mal ou est-ce ainsi? Existe-t-il une largeur de fenêtre définie pour l'impression?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
            xs6
            </div>
            <div class="col-xs-6">
            xs6
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
            sm6
            </div>
            <div class="col-sm-6">
            sm6
            </div>
        </div>       
    </div>
</body>
</html>
htmlcsstwitter-bootstrap
31
Gordon Copestake

Ce que j'ai fait est de recréer manuellement ces classes de colonnes dans mon print css.

.col-print-1 {width:8%;  float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}

Ensuite, j'utilise simplement ces classes comme j'utilise les classes bootstrap pour créer uniquement mes colonnes. J'ai également créé .visible-print et .hidden-print pour masquer/afficher les éléments uniquement dans la version imprimée.

Il faut encore du travail, mais cette rapide mise à jour m'a beaucoup aidé.

50
Fredy31

Si vous souhaitez que la grille de Bootstrap n'imprime pas avec col-xs (paramètres mobiles), et que vous souhaitiez utiliser col-sm- ?? Au lieu de cela, basé sur Fredy31 answer et vous n'avez même pas besoin de définir col-print - ??. il suffit de réécrire tout col-md- ?? Définitions de classe css dans a: @media print {/ * copier et coller depuis bootstrap.css * /} comme ceci:

@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%;
   }
}
33
Ehsan Abidi

La version Sass de la solution Fredy31:

@for $i from 1 through 12 {
    .col-print-#{$i} {
        width: #{percentage(round($i*8.33)/100)};
        float: left;
    }
}
18
MiCc83

J'avais un problème similaire. Pour moi, la solution la plus simple était de modifier manuellement la largeur des éléments que je souhaitais voir différemment une fois imprimés (et j’ai ajouté une classe spécifique-dans col-xs-6 etc.).

Par exemple:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
            Some stuff
            </div>

            <div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
            Some more stuff
            </div>
        </div>
    </div>
</div>

@media print {
    .title-container {
        width: 360px;
        float: left;
    }

    .details-container {
        width: 300px;
        float: right;
    }
}

Dans mon cas, il me fallait une colonne flottante à droite, une à gauche, donc les flotteurs .... Vous pouvez définir dans votre css personnalisé la largeur également pour .col-xs-6 etc C'est juste une solution rapide et sale, mais j'ai fait le travail pour une page où j'avais besoin de ça ...

3
firepol

Vos styles de commutateur comme ça

<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Voir 

# grid-example-mixed ou # grid-example-mixed-complete

et peut vous avez besoin de clearfix

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>

# grid-responsive-resets

3
Dwza

Ce qui suit est idéal pour créer des éléments de grille spécifiques au support d'impression. Utilisation de Bootstrap 3.

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

Ensuite, vous pouvez utiliser tous les éléments de la grille avec le mot clé print. Ex: col-print-6col-print-offset-2, etc.

2
kspearrin

Et la version SASS de la réponse d'Ehsan Abidi utilisant la réponse de MiCc83:

  @for $i from 1 through 12 {
      .col-sm-#{$i} {
          width: #{percentage(round($i*8.33)/100)};
          float: left;
      }
  }

Je préfère cela car je spécifie toujours la taille "sm" et celle qui se rapproche le plus d'une page d'impression dans mes applications. Ensuite, je n'ai besoin d'ajouter quelque chose spécifiquement pour l'impression que lorsque j'ai une condition aberrante.

1
William Schroeder McKinley

Vous pourriez peut-être utiliser Bootstrap 2. Si vous connaissez bien Bootstrap 2, vous pouvez l’utiliser comme alternative, car cela offre des CSS non réactives. Bootstrap 2 n’était pas mobile en premier lieu, vous deviez ajouter une feuille de style supplémentaire pour rendre vos pages Web réactives.

Ou vous pouvez ajouter des correctifs pour la partie mobile. Voir http://getbootstrap.com/css/#grid-responsive-resets

1
Edgar

Pour Bootstrap 4 (avec SASS)

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @for $i from 1 through $grid-columns {

            @media print {
                .col-print#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

créera


@media print {
  .col-print-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; } }

@media print {
  .col-print-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; } }

@media print {
  .col-print-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

@media print {
  .col-print-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

@media print {
  .col-print-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; } }

@media print {
  .col-print-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

@media print {
  .col-print-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; } }

@media print {
  .col-print-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

@media print {
  .col-print-9 {
    flex: 0 0 75%;
    max-width: 75%; } }

@media print {
  .col-print-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; } }

@media print {
  .col-print-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; } }

@media print {
  .col-print-12 {
    flex: 0 0 100%;
    max-width: 100%; } }
1
Rui Caramalho

Si vous n'avez que 2 colonnes, vous pouvez l'essayer. Je l'ai corrigé avec le code ci-dessous.

<div class="row">
    <div class="w-50 p-3 float-left">            
    </div>
    <div class="w-50 p-3 float-right">
    </div>
</div>
0
seflix