6
votes

Impression avec Bootstrap CSS

J'ai une page avec une mise en page BOOTSTRAP CSS. J'essaie d'imprimer une table. Cependant, le tableau ne ressemble à rien à l'écran. J'inclus le fichier CSS comme celui-ci: xxx

est un moyen d'obtenir la table imprimée pour regarder la même chose que sur l'écran ou dois-je créer un fichier CSS spécifique juste pour le tableau I vouloir imprimer?

twitter-bootstrap printing-web-page

3 commentaires

Voir la réponse acceptée sur cette question .. Stackoverflow.com/Questtions/12302819/...

Bonjour j'ai regardé cette réponse et je semble inclure le fichier Bootstrap CSS comme mentionné dans cette réponse. Si je modifie la balise de liaison pour ajouter un support = "Imprimer", il ne fonctionnera pas pour le contenu à l'écran.

Avez-vous déjà trouvé une réponse à cela?

3 Réponses :

7
votes

Vous pouvez appliquer la feuille de style trop à la fois d'impression et d'écran à l'aide de l'écran Media = 'Ecran, Imprimer' CODE>

 <link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>

1 commentaires

Merci pour votre réponse. Cependant, cette solution éliminera les bordures de la table. J'ai peut-être besoin d'ajouter un fichier CSS séparé pour @ media = imprimé qui inclut les frontières dans des tables?

1
votes

Vous devez utiliser Media = "TOUT" STRAND> pour assurer votre CSS appliqué dans tous les cas, y compris l'impression. Utilisation de MEDIA = 'Ecran, imprimé' strong> n'a pas fonctionné pour moi.

<link ../bootstrap.min.css' rel='stylesheet' media='all'>

1 commentaires

Bien que ce code puisse répondre à la question, fournissant un contexte supplémentaire concernant pourquoi et / ou comment il répond à la question améliorerait de manière significative sa valeur à long terme. S'il vous plaît Modifier Votre réponse pour ajouter une explication.

3
votes

Remplacez tous les col-md - avec col-xs - Par exemple: Remplacez tous les COL-MD-6 TO COL-XS-6 .
Et n'oubliez pas d'utiliser une classe de table bootstrap.
C'est la chose qui a fonctionné pour moi pour me débarrasser de ce problème, vous pouvez déterminer ce que vous devez remplacer.
merci.
0 commentaires

Articles qui pourrait vous intéresser : Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? Comment empêcher ou désactiver le comportement de positionnement automatique du popover Bootstrap 4 (comportement d'auto-ajustement) Rembourrage avec ajustements sur un système de menu de la barre de navigation Bootstrap 4 Pourquoi ma ligne Bootstrap ajoute-t-elle un remplissage à mon élément?