Impression d'une page avec bootstrap 3
J'ai été en regardant à travers un grand nombre de réponses ici sur stackoverflow que semi-couvrir ce que je me demandais, mais je n'ai pas trouvé quelque chose qui a fonctionné pour moi.
Je comprends que l'impression de la page est d'environ 550 px pour le format A4 et à cet effet, bootstrap va utiliser les styles et la mise en page, habituellement utilisé pour les appareils mobiles.
Lorsque j'utilise Ctrl+P pour ma page web, la page imprimable ressemble tout à fait à la version mobile de ma page. Mais comment puis-je la faire ressembler à la version de bureau? (media > 1024 px) Est-il un moyen de faire cela?
Je sais que je peux modifier le css spécialement pour l'impression. Mais comment résoudre cette chose avec le bootstrap 3 système de grille? La largeur de mes divs obtient après ce que j'ai ajouté pour le col-xs, mais je veux imprimer à utiliser la mise en page (largeur) pour col-md
Edit: Après j'ai été struggeling, et ce, à quelques heures de plus, je me rends compte qu'il pourrait être plus complexe que je ne le devrait. Simplement en changeant la largeur ne résout pas 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 semble bon en XS pour les petits appareils, mais l'impression en XS fait de nombreux éléments look gigantesque. Donc, la question reste. Est-il un moyen de faire de l'impression de la page le même aspect que la mise en page de moyens ou de gros appareils? Ou dois-je faire de l'impression css sans l'aide de bootstrap système de grille et statique ajouter les largeurs en pt pour tous les éléments pour accomplir cette?
Merci d'avance
Vous devez vous connecter pour publier un commentaire.
Il serait utile de fournir une JSBin. De toute façon, depuis que j'ai eu cette mise en JSBin avec col-sm-(astérisque), vous pouvez modifier tous les -sm - à -xs - entre le support d'impression de la requête. Tous les pourcentages sont les mêmes à chaque point d'arrêt, de sorte qu'un changement sm xs permettra de l'imprimer et d'ignorer les autres col-(astérisque) des classes. Ahh, j'ai lu le post maintenant, vous aurez besoin de changer tous les col-sm au col-md dans ce et puis les utiliser !important, cela devrait le faire. Le xs col sont à l'extérieur des requêtes de média, c'est pourquoi ce qui se passe.
http://jsbin.com/AzICaQes/5
En fait, tout ce que vous devez ajouter (pour l'utilisateur.css) est-ce:
Pendant que vous y êtes, pensez à utiliser l'ensemble de ces paramètres pour bootstrap 3
J'ai fini par résoudre le problème en utilisant une impression.fichier css sans le responsive bootstrap trucs inclus. Inclus seulement de bootstrap choses à montrer et cacher.
Pour ceux qui utilisent bootstrap mixin pour créer des colonnes comme ceci (sass version):
il ne sera pas suffisant pour remplacer les styles pour les colonnes des classes comme Christina suggère. La seule solution simple que j'ai trouvé a été de changer de $écran-sm dans _variables.scss pour 595px et recompiler bootstrap.css
Donc, trouver ce code dans _variables.scss:
et de le modifier pour cela:
puis dans votre _print.scss
J'ai eu le même problème. J'ai fini par remplacer tous les col-md-* avec col-xs-* et il a travaillé comme un charme. Voici l'exemple de code
converti à
Ajouter le style css dans votre impression.fichier css